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>
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
【默认样式】
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 规定禁用该选项组(可选)
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
<button