HTML表单控件

input元素无疑是一个庞大和复杂的元素，但它并不是唯一的表单控件。还有button、select、option、label、optgroup、textarea、fieldset、legend这八个传统表单控件，datalist、progress、meter、output、keygen这五个新增表单控件

传统控件

button  定义一个按钮

select   定义一个下拉列表

option  定义下拉列表中的一个选项

optgroup  定义选项组，用于组合选项

textarea  定义多行的文本输入控件

fieldset  分组表单内的相关元素

legend  定义fieldset元素的标题

label   定义input元素的标注

button

button元素用来定义一个按钮，button元素内部可以放置文本或图像或其他多媒体内容。但唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为

始终为button元素设置type属性，IE7-浏览器的默认类型是button，而其他浏览器的默认类型是submit

IE7-提交button元素之间的文本，而其他浏览器则会提交value属性的内容

<button>元素比<input>元素更易样式化。可以添加内联HTML内容（如<em>，<strong> 甚至<img>），并使用:after和:before伪元素实现复杂的渲染，而只有文本值属性

//IE7-浏览器:按下提交按钮时，URL添加?btn=1
//其他浏览器:按下button按钮时，URL添加?btn=2
<form action="#" >
<button value="2" name="btn">1</button>
<input type="submit">
</form>

【默认样式】

chrome/safari
    padding: 1px 6px;
    border-width:1px;
firefox
    padding: 0px 6px;
    border-width:2px;
IE8-IE11
    padding: 3px 10px;
    border-width:1px;
IE7-
    padding: 1px 0.5px;
    border-width:1px;

【属性】

autofocus   规定当页面加载时按钮自动获得焦点

disabled   规定应该禁用该按钮

form  规定按钮属性一个或多个表单

formaction  覆盖form元素的action属性

formenctype  覆盖form元素的enctype属性

formmethod  覆盖form元素的method属性

formnovaliadate  覆盖form元素的novalidate属性

formtarget  覆盖form元素的target属性

name   规定按钮的名称

type   规定按钮的类型

value  规定按钮的初始值

select

select元素用来定义一个下拉列表，包含任意数量的option和optgroup元素

【属性】

autofocus  规定在页面加载后文本区域自动获得焦点

disabled  规定禁用该下拉列表

form  规定文本区域所属的一个或多个表单

multiple  规定可选择多个选项

name  规定下拉列表的名称

size  规定下拉列表中可见选项的数目

注意：size不可为0，默认为1

【默认样式】

chrome/safari
    border: 1px solid;
    box-sizing: border-box;
firefox
    padding: 1px;
    box-sizing: border-box;
IE9+
    border: 1px solid;
    box-sizing: border-box;
IE8-
    border: 1px solid;

注意：IE8-浏览器box-sizing:content-box;而其他浏览器box-sizing:border-box

【默认宽高】

chrome
    width:65px;
    height:16px;
firefox
    width:54px;
    height:21px;
safari
    width: 56px;
    height: 15px;
IE8+
    width:74px;
    height:17px;

注意：safari浏览器无法设置高度

option

option元素定义下拉列表中的一个选项

option元素有两种应用场景，除了用于下拉列表select外，还可以用于选项列表datalist中

【属性】

disabled  规定此选项应在首次加载时被禁用

label  定义当使用optgroup时所使用的标注，替代option元素内容

注意：firefox不支持label属性

selected  规定选项在首次显示在列表中时表现为选中状态

value  定义送往服务器的选项值

注意：当设置value值时，服务器提交的是value的值；否则提交给服务器的是option的元素内容

【默认样式】

chrome
    padding: 0 2px 1px;

注意：option无法设置margin、padding、border等盒模型样式

optgroup

optgroup元素定义选项组，用于组合选项

注意：optgroup无法设置margin、padding、border等盒模型样式

【属性】

label  为选项组规定描述(必须)

disabled  规定禁用该选项组(可选)

<button id="btn1a" type="button">启用</button>
<button id="btn1b" type="button">禁用</button>
<button id="btn2a" type="button">可多选&l