其他表单控件
label 表单控件的标题
作用：关联表单控件激活行为，建立文字标签与表单控件的关联。也就是说，用于绑定一个表单元素，当点击 label 标签的时候，被绑定的元素就会获得输入焦点。
可关联元素：button、input、meter、output、progress、select、textarea
[ 用法 ] 一种是使用 for 属性，另一种是将表单控件嵌套到 label 内部（推荐）。但，IE6 只识别使用 for 属性的方法。
// for属性，规定label绑定到哪个表单元素；label标签的for属性要与相关元素的id属性相同。 <label>姓名：<input name="cname"></label> 或 // 如果label中有多个表单控件，想定位到某个表单控件，可以通过for-id的格式进行关联 <label for="fname">name:</label><br> <input type="text" name="givenname" value="given name"> <input type="text" name="familyname" value="family name" id="fname">
[ label 元素的 JS 属性 ]
- form：表示 label 元素所归属的表单
- htmlFor：表示 label 元素的 for 属性的字符串值
- control：表示 label 元素所指定的 input 控件（IE 浏览器不支持）
<form id="myForm"> <input type="file" id="myFile"> <label for="myFile" id="myLabel">我是label</label> </form> <script> var myLabel = document.getElementById('myLabel'); console.log(myLabel.form); // <form id="myForm"> console.log(myLabel.htmlFor); // 'myFile' console.log(myLabel.control); // <input type="file" id="myFile"> </script>
select + optgroup + datalist + option
[1] select 列表选择器，又称下拉菜单 // 可以包含任意数量的 option 和 optgroup 元素
- autofocus 规定在页面加载后文本区域自动获得焦点
- disabled 规定禁用该下拉列表
- form 规定文本区域所属的一个或多个表单
- multiple 规定可选择多个选项，默认显示 4 项
- name 规定下拉列表的名称
- size 规定下拉列表中可见选项的数目（size 不可为 0，默认为 1）
// 单选
<select>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
// 多选（默认显示4项）
<select multiple>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
// size属性：选项显示数量配置，因此单选也可以变成类似多选的列表式
<select size="2">
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
[2] 选项分组 optgroup 定义选项组，用于组合选项。
// optgroup无法设置margin、padding、border等盒模型样式。 属性： label 为选项组规定描述(必须) disabled 规定禁用该选项组(可选)
<button id="btn1a" type="button">启用</button>
<button id="btn1b" type="button">禁用</button>
<button id="btn2a" type="button">可多选</button>
<button id="btn2b" type="button">不可多选</button>
<button id="btn3a" type="button">size=1</button>
<button id="btn3b" type="button">size=2</button>
<button id="btn3c" type="button">size=3</button>
<button id="btn3d" type="button">不设置size</button>
<form action="#">
<br><br>
<select name="test" id="select">
<optgroup label="num">
<option value="11" disabled>1</option>
<option value="22" selected>2</option>
<option value="33">3</option>
<option value="44" label="word">4</option>
</optgroup>
<optgroup label="word">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</optgroup>
<optgroup label="汉字" disabled>
<option value="一个">一</option>
<option value="二个">二</option>
<option value="三个">三</option>
<option value="四个">四</option>
</optgroup>
</select>
<input type="submit">
</form>
<script>
var select = document.getElementById('select');
btn1a.onclick = function() {
select.removeAttribute('disabled');
}
btn1b.onclick = function() {
select.setAttribute('disabled', '');
}
btn2a.onclick = function() {
select.setAttribute('multiple', '');
}
btn2b.onclick = function() {
select.removeAttribute('multiple');
}
btn3a.onclick = function() {
select.setAttribute('size', '1');
}
btn3b.onclick = function() {
select.setAttribute('size', '2');
}
btn3c.onclick = function() {
select.setAttribute('size', '3');
}
btn3d.onclick = function() {
select.removeAttribute('size');
}
</script>
[3] datalist 为表单控件预定义的选项集合 // 单独写时不展示在页面上
datalist 元素规定输入域的选项列表，列表是通过 datalist 内的 option 元素创建的。通常与 input 搭配使用。
[ 用法 ] 把 datalist 绑定到输入域，需要输入域的 list 属性引用 datalist 的 id；且 option 一定要设置 value 属性。
<form action="#"> <input list="list" name="input"> <datalist id="list"> <option value="1"> <option value="2"> <option value="3"> </datalist> </form>
[ option，选项 ] 可以内嵌在 select、datalist、optgroup 元素里
<option label="label" value="value" disabled selected>text</option> 视觉效果： 在select元素中，显示的是label中的内容；在datalist中，左侧为value值，右侧灰色提示信息为label值 label：选项标签，不写的话，默认取选项内容，即text value：选项值 disabled：选项禁用 selected：选项选中 // 结束标签有三种情况是可以省略的：后面紧跟option元素、后面紧跟optgroup元素、后面没有其他兄弟元素
应用场景：除了用于下拉列表 select 外，还可以用于选项列表 datalist 中。
属性：
disabled 规定此选项应在首次加载时被禁用
label 定义当使用optgroup时所使用的标注，替代option元素内容
[注意]firefox不支持label属性
selected 规定选项在首次显示在列表中时表现为选中状态
value 定义送往服务器的选项值
[注意]当设置value值时，服务器提交的是value的值；否则提交给服务器的是option的元素内容
默认样式：
chrome
padding: 0 2px 1px;
[注意] option无法设置margin、padding、border等盒模型样式
textarea 多行文本输入控件
textarea 定义多行的文本输入控件，又称文本域，可容纳无限数量的文本。 // 浏览器不允许 textarea 相互嵌套。
<textarea cols="文本区内的可见列数" rows="文本区内的课件行数"></textarea>
// textarea的属性：
name 规定文本区的名称
value 表示文本区的值
disabled 规定禁用该文本区
// IE7-浏览器不支持通过setAttribute('disabled','')的写法，必须设置为setAttribute('disabled','disabled')
readonly 规定文本区为只读。 // IE7-浏览器不支持通过javascript设置readonly属性
form 规定文本区域所属的一个或多个表单。 // IE浏览器不支持该属性
autofous 规定在页面加载后文本区域自动获得焦点。 // IE9-浏览器不支持该属性
required 规定文本区域是必填的。 // IE9-浏览器和safari浏览器不支持该属性
placeholder 规定描述文本区域预期值的简短提示。 // IE9-浏览器不支持该属性
maxlength 规定文本区域的最大字符数。 // IE9-浏览器不支持该属性
cols 规定文本区内的可见列数，可以理解为每行中的字符数。
rows 规定文本区内的可见行数
// 可以用cols和rows来规定textarea的尺寸，但更好的办法是使用CSS的height和width属性。
wrap 规定当在表单中提交时，文本区域中折行如何处理。
当wrap="soft"，表示表单提交时，虽然文字在屏幕上折行，但提交的数据里不会有换行符(默认值)；
而当wrap="hard"，表示表单提交时，提交的数据包含文本换行符%0D%0A。
[ 防拖拽文本域 — CSS 样式：resize ] resize:none; 可以防止火狐、谷歌等浏览器随意的（右下角）拖动文本域。
<textarea></textarea> // 右下角可以拖动 <textarea style="resize:none;"></textarea> // 右下角不可以拖动
progress 任务进度信息控件
progress 元素用来标示任务的进度或进程（常用于表示过程）。 // IE9- 浏览器及 safari 浏览器不支持
// 进度模式 确定进度 <progress value="50" max="100"></progress> 不确定进度 <progress max="100"></progress>
属性： max 规定任务一共需要多少工作 value 规定已经完成多少工作 如果progress控件什么属性都不设置，则会有进度条左右往返运动的效果
<input id="btn" type="button" value="开始下载">
下载进度：<progress id="test" value="0" max="100"></progress>
<script>
var oTimer;
btn.onclick = function(){
if(oTimer){
return;
}
oTimer = setInterval(function(){
test.value++;
if(test.value >= test.max){
clearInterval(oTimer);
}
},50);
}
</script>
meter 度量信息控件
meter 元素用于显示剩余容量或剩余库存（常用于表示状态）。 // IE 浏览器及 safari 浏览器不支持。
// 属性： form 规定meter元素所属的一个或多个表单 high 规定被视作高的值的范围 low 规定被视作低的值的范围 max 规定范围的最大值 min 规定范围的最小值 optimum 规定度量的最优值 value 规定度量的当前值(必需) [注意] min 小于 low 小于 high 小于 max
<input id="btn" type="button" value="增加库存">
库存量：<meter id="test" value="10" min="0" low="30" optimum="60" high="80" max="100" ></meter>
<script>
var oTimer;
btn.onclick = function(){
if(oTimer){
return;
}
oTimer = setInterval(function(){
test.value++;
if(test.value >= test.max){
clearInterval(oTimer);
}
},50);
};
</script>
如果 meter 标签的 value 属性，取值为小数，如 0.3，且没有 max 属性值时，则颜色块显示为宽高的 30%。
<meter value="0.3"></meter>
button 按钮
[ 按钮行为 ] reset，重置表单；submit，提交表单；button，不做任何事情。
button 元素比 input 元素更易样式化。
<form action="#" > <button>提交</button> <input type="submit"> </form> // button可以添加内联HTML内容（如img），并使用:after和:before伪元素实现复杂的渲染，而input只有文本值属性。
[ button元素属性 ]
- autofocus 规定当页面加载时按钮自动获得焦点
- disabled 规定应该禁用该按钮
- form 规定按钮属性一个或多个表单
- formaction 覆盖 form 元素的 action 属性
- formenctype 覆盖 form 元素的 enctype 属性
- formmethod 覆盖 form 元素的 method 属性
- formnovaliadate 覆盖 form 元素的 novalidate 属性
- formtarget 覆盖 form 元素的 target 属性
- name 规定按钮的名称
- type 规定按钮的类型
- value 规定按钮的初始值