HTML学习之路-第四天

1.表单标签

(1)表单的作用:收集用户信息

(2)表单元素:比较特殊的HTML标签

(3)格式:<form>

                                  <表单元素>

                    </form>

2.常见的表单元素:

(1)input标签:<input type="数据类型">

-数据类型可以为:text<明文输入>

                              password<暗文输入>

                              radio<单选框,单选框默认不互斥,所以需要设置name属性,默认选项将属性写为checked>、

                              checkbox<多选框>

                             button<按钮,配合js进行操作>

                             image<图片按钮>

                             reset<清空填写的信息>


                             submit<向服务器提交数据,需要给form表单添加action属性,通过这个属性提交到指定服务器,再给需要提交到服务器的表单元素添加一个name属性>

                             hidden<隐藏域,不被用户知晓的情况下将数据提交到服务器>

-value属性:输入框内的默认值

-在HTML5中新增的数据类型(浏览器不一定支持):email<邮箱的特定格式>、url<网址的特定格式>、number<电话号码的特定格式>、data<选择时间>、color<选择颜色>

2.label标签

(1)作用:让点击的文字与对应的8输入框进行聚焦

(2)用法:

-把文字写入<label>...</label>标签,并给<input>标签加入id属性,然后用for属性将label标签与input标签关联(官方推荐)

-直接将文字与input标签写入label标签

3.DataList标签(HTML5)

(1)作用:给输入框绑定待选项(非常多的浏览器不支持)

(2)格式:<datalist>

                                   <option>待选项内容</option>

                    </datalist>

4.select标签

(1)作用:定义下拉列表

(2)格式:<select>

                                 <option>列表数据</option>

                    </select>


(3)列表数据分类:将<option>...</option>写入<optgroup label="类别的名称">...</optgroup>中进行分类

5.textarea标签

(1)作用:定义一个多行的输入框,可以无限输入且可以拉伸高度与宽度

(2)格式:<textarea>

                    </textarea>

(3)属性:cols(宽度)、rows(高度)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,948评论 18 139
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,321评论 1 41
  • HTML需要掌握标签 标签(空格分隔): H5+CSS [TOC] 常用标签 img 注意点 和H系列标签/p标签...
    袁俊亮技术博客阅读 2,063评论 1 8
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,245评论 4 61
  • 湖北省读书会读书笔记Day13 书目《岛上书店》 R:“当我读一本书时,我想让你也同时读。我想知道阿米莉娅对这本书...
    不爱吃土豆的人儿阅读 380评论 0 0