其他表单控件

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">

// for属性，规定label绑定到哪个表单元素；label标签的for属性要与相关元素的id属性相同。

或 // 如果label中有多个表单控件，想定位到某个表单控件，可以通过for-id的格式进行关联

[ 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>

1
2
3
4
5
6
7
8
9
10

<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>

// 单选

</select>

// 多选（默认显示4项）

</select>

// size属性：选项显示数量配置，因此单选也可以变成类似多选的列表式

</select>

[2] 选项分组 optgroup 定义选项组，用于组合选项。

// optgroup无法设置margin、padding、border等盒模型样式。

属性：
label 　　　　　　　为选项组规定描述(必须)
disabled 　　　　 　规定禁用该选项组(可选)

// 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>

<button id="btn3d" type="button">不设置size</button>

</optgroup>

</optgroup>

</optgroup>

</select>

</form>

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>

1
2
3
4
5
6
7
8

<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元素中，显示的是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等盒模型样式

属性：

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。

// 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> // 右下角不可以拖动

1
2
3

<textarea></textarea> // 右下角可以拖动

<textarea style="resize:none;"></textarea> // 右下角不可以拖动

progress 任务进度信息控件

progress 元素用来标示任务的进度或进程（常用于表示过程）。 // IE9- 浏览器及 safari 浏览器不支持

// 进度模式

确定进度  <progress value="50" max="100"></progress>
不确定进度  <progress max="100"></progress>

// 进度模式

确定进度 <progress value="50" max="100"></progress>

不确定进度 <progress max="100"></progress>

属性：
max 　　　　 规定任务一共需要多少工作
value 　　 　规定已经完成多少工作
如果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>

下载进度：<progress id="test" value="0" max="100"></progress>

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

// 属性：

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 id="test" value="10" min="0" low="30" optimum="60" high="80" max="100" ></meter>

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>

1	<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只有文本值属性。

</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 规定按钮的初始值