html表单的13种表单控件
目录
一、概述
二、传统控件
三、新增控件
一、概述
除了input标签外，html还有八个传统表单控件和五个html5新增的表单控件。
二、传统控件
button 定义按钮
select 定义下拉列表
option 定义下拉列表中的选项
optgroup 定义选项组，用于组合选项
textarea 定义多行的文本输入控件
fieldset 分组表单内的相关控件
legend 定义fieldset标签的标题
label 定义input标签的标注button标签
定义按钮。标签内部可放置文本、图像或其它多媒体内容。唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
始终为button标签设置type特性，ie7及以下版本的浏览器的默认类型是button，而其它浏览器的默认类型是submit。
ie7及以下版本的浏览器提交button标签之间的文本，其它浏览器则会提交value特性值。
button标签比input标签更易样式化，可以添加内联html内容，如em标签、strong标签或img标签等。可以使用:after和:before伪元素实现复杂的渲染。
button标签的特性值如下所示。
autofocus 页面加载时按钮自动获得焦点
disabled 禁用按钮
form 规定按钮属于一个或多个表单（特性值为form表单的id）
formaction 覆盖form元素的action属性
formenctype 覆盖form元素的enctype属性
formmethod 覆盖form元素的method属性
formnovaliadate 覆盖form元素的novalidate属性
formtarget 覆盖form元素的target属性
name 规定按钮的名称
type 规定按钮的类型
value 规定按钮的初始值
下面的按钮位于form标签之外，但仍是表单的一部分
select
定义下拉列表，可以包含任意数量的option和optgroup标签，标签特性如下所示。
autofocus 页面加载后自动获得焦点
disabled 禁用控件
form 规定文本区域所属的一个或多个表单
multiple 允许多选
name 规定下拉列表的名称
size 规定下拉列表中可见选项的数目,size不可为0,默认为1option标签
定义下拉列表的选项。option标签有两个应用场景，其一下拉列表select，其二选项列表datalist。标签特性如下所示。
disabled 规定此选项应在首次加载时被禁用
label 定义当使用optgroup时所使用的标注,替代option元素内容,firefox不支持label属性
selected 规定选项在首次显示在列表中时表现为选中状态
value 定义送往服务器的选项值当设置value特性时，服务器提交的是value特性值，否则提交给服务器的是option标签的文本内容。注意，option无法设置margin、padding、border等盒模型样式。
optgroup标签
定义选项组，用于组合选项。注意，optgroup无法设置margin、padding、border等盒模型样式。标签特性如下所示。
label 为选项组规定描述(必须)
disabled 规定禁用该选项组(可选)
textarea标签
定义多行文本输入控件，文本区可容纳无限数量的文本。注意，浏览器不允许textarea嵌套textarea。标签特性如下所示。
name 规定文本区的名称
value 表示文本区的值
disabled 规定禁用该文本区
readonly 规定文本区为只读 注意，ie7及以下版本的浏览器不支持通过setAttribute('disabled','')的写法，必须设置为setAttribute('disabled','disabled')。ie7及以下版本的浏览器不支持通过JS设置readonly特性。
form 规定文本区域所属的一个或多个表单，IE浏览器不支持该属性
autofous 规定在页面加载后文本区域自动获得焦点，IE9-浏览器不支持该属性
required 规定文本区域是必填的，IE9-浏览器和safari浏览器不支持该属性
placeholder 规定描述文本区域预期值的简短提示，IE9-浏览器不支持该属性
maxlength 规定文本区域的最大字符数，IE9-浏览器不支持该属性
cols 规定文本区内的可见列数
rows 规定文本区内的可见行数注意，可以用cols和rows来规定textarea的尺寸，但更好的办法是使用CSS的height和width属性。
wrap 规定当在表单中提交时，文本区域中折行如何处理当特性值为soft时，表示表单提交时，虽然文字在屏幕上折行，但提交的数据里不会有换行符(默认值)。当特性值为hard时，表示表单提交时，提交的数据包含文本换行符%0D%0A。
fieldset标签
用于将表单内的相关元素分组，提升可访问性，多数浏览器用一个简单的边框来显示fieldset。特性值如下所示。
disabled 禁用fieldset
form 规定fieldset所属的一个或多个表单
name 规定fieldset的名称legend标签
用于定义fieldset标签的标题。
label标签
为input标签定义标注，建立文字标签与表单控件的关联。在label标签内点击文本会触发此控件，选择该文本时浏览器会自动把焦点转移到和标签相关的表单控件上。标签特性值如下所示。
for 规定label绑定到哪个表单控件
form 规定label字段所属的一个或多个表单label标签有两种用法，其一使用for特性，其二将表单控件嵌套到label标签内部。ie6浏览器只识别使用for特性的方法。
注意，label标签的for特性值为绑定表单控件的id特性值。
使用for方法
使用嵌套方法
label标签有三个JS属性，分别是form、htmlFor和control。
form：表示label控件所归属的表单
htmlFor：表示label控件的for特性值
control：表示label控件所指定的input控件(注意：IE浏览器不支持)
三、新增控件
datalist 定义输入域的选项列表
keygen 定义密钥对生成器，用于生成密钥
output 用于显示计算的结果
progress 用于显示进度(前进量)
meter 用于显示度量(剩余量)datalist标签
规定输入域的选项列表，列表是通过option标签创建的。若要把datalist绑定到输入域，需要把输入域的list特性值设置为datalist的id特性值。option标签一定要设置value特性。注意，ie9及以下版本的浏览器及safari浏览器不支持。
keygen标签
规定表单的密钥生成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器。注意，safari和ie不支持该属性，chrome部分支持该属性。
autofocus 页面加载时获得焦点
challenge 如果使用,则将keygen的值设置为在提交时询问
disabled 禁用keygen字段
form 定义所属的一个或多个表单
keytype 定义keytype,rsa生成RSA密钥(默认)
name 定义keygen元素的唯一名称
output标签
用于显示计算的结果。这是一个语义化标签，定义不同类型的输出，比如脚本的输出。注意，ie浏览器不支持该标签。标签特性如下所示。
for 定义输出域相关的一个或多个标签
form 定义输入字段所属的一个或多个表单
name 定义对象的唯一名称progress标签
用来表示任务的进度或进程(常用于表示过程)。注意，ie9及以下版本的浏览器及safari浏览器不支持。
max 规定任务一共需要多少工作
value 规定已完成多少工作如果progress控件什么属性都不设置，则会有进度条左右往返运动的效果。
下载进度：
meter标签
meter元素用于显示剩余容量或剩余库存(常用于表示状态)，注意，ie浏览器及safari浏览器不支持。标签特性如下所示。
form 规定标签所属的一个或多个表单
high 规定被视作高的值的范围
low 规定被视作低的值的范围
max 规定范围的最大值
min 规定范围的最小值
optimum 规定度量的最优值
value 规定度量的当前值(必需)注意，min < low < high < max。
库存量：如果meter标签的value特性，取值为小数，如0.3，且没有max属性值时，则颜色块显示为宽高的30%。