html所有标签的解释以及用法6,HTML5表单标签及标签属性总结

目标:

1、列出所有的表单标签

2、总结每个标签的用途以及标签的常用属性

PS:表单主要用于收集用户的信息

PS:凡是用于收集用户信息的控件都必须要有name属性,有些控件(例如checkbox、radio)必须明确指明value属性,大部分控件可以指定默认的value值,也可以不指定直接获取用户输入的就可以了

一、表单的标签

1、form 表示HTML表单

2、input 表示用来收集用户输入数据的控件,通过设置type属性的不同属性值获取不同功能的控件

3、label 可以通过for属性绑定表单中其它控件,解释其他控件用途

4、select、option、optgroup 表单下拉框组合

5、textarea 表示可以输入多行文本的控件

6、datalist 定义一组提供给用户的建议值

7、fieldset、legend 对表单中的控件分组

8、output 表示计算结果

9、button 按钮,可以通过设置type值获取重置、提交、普通按钮这三种功能的按钮,这些功能的控件都可以通过input获取

二、标签用法及标签属性

1、通常情况下,标签都需要配合标签属性才能达到目的

2、有些属性是所有标签都有的,有些属性是只有部分标签有的,有些属性时某个标签独有的

3、下面尽量列出每个标签所有的属性,以及一个常用的搭配

4、form标签

1)、action 表示表单提交的页面

2)、method 表示表单的请求方式,有POST和GET两种,默认GET

3)、enctype 表示浏览器对发送给服务器的数据所采用的编码格式。 有三种:application/x-www-form-urlencoded(默认编码,不能将文件上传到服务器)、multipart/form-data(用于上传文件到服务器)、text/plain(未规范的编码,不建议使用,不同浏览器理解不同)

4)、name 设置表单名称

5)、target 设置提交时的目标位置,_blank、_parent、_selt、_top

6)、autocomplete 设置浏览器记住用户输入的数据, 实现自动完成表单。 默认为 on 自动完成,如果不想自动完成则设置 off。

7)、novalidate 设置是否执行客户端数据有效性检查,详情 >>>>

5、input标签是表单标签中使用频率最高的标签,通过设置type属性的值获取不同功能的控件,详情>>>>

6、labe标签:通过for属性绑定表单中其它控件,当点击label时相当于点击了和label绑定的控件,标签中文本用于解释控件用途,自定义一些表单控件样式时,label标签非常有用

用户名:

用户名:

7、下拉框标签 select、option、optgroup

1)、option、optgroup是select的子标签

2)、optgroup标签用于给option分组,属性label用于说明该组内容,disabled用于禁止该组中option被选中,optgroup本身是不可选的

3)、option标签用于包裹展示给用户的内容,它的value属性值会和select的name属性值形成name=value发送到服务器,当多选时:name=value1&name=value2,它还有disabled、selected、label这些可选的属性

4)、select用于包裹option、optgroup,必需属性name,当表单提交时带着value值发送到服务器

4.1)、disabled 将下拉列表禁用

4.2)、from=”form_id” 将select和一个表单绑定,当这个表单提交时,会带上这个select,不管select在form内还是外

4.3)、size 设置不点击select的时候一次显示几个option给用户看

4.4)、multiple 设置是否可以多选,该属性存在即可多选,name=value1&name=value2,name是唯一的

4.5)、autofocus select自动获取焦点

4.6)、required 当该属性存在,则select必须有选择才能通过

河南

河北

山西

陕西

8、textarea标签

8.1)、name 设置提交时的名字

8.2)、form 将textarea和某个表单绑定

8.3)、readonly 设置多行文本只读

8.4)、disabled 将多行文本框禁用

8.5)、maxlength 设置最大可输入的字符长度

8.6)、autofocus 获取焦点

8.7)、placeholder 设置输入时的提示信息

8.8)、rows 设置行数

8.9)、cols 设置列数

8.10)、wrap 设置提交表单时文本是否换行

8.11)、required 设置必须输入值,否则无法通过验证

9、datalist 必须属性id,定义一组提供给用户的建议值,list–>id

10、fieldset、legend 对表单中的控件分组

这是标题

...........

11、output 表示计算结果

12、button 按钮,可以通过设置type值获取重置、提交、普通按钮这三种功能的按钮,当type值为submit时,会有一些额外属性。这些功能的控件都可以通过input获取。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值