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 action="/example/html5/demo_form.asp" method="get" id="nameform">
    姓：<input type="text" name="lname" /><br />
    名：<input type="text" name="fname" /><br />
</form>
<p>下面的按钮位于form标签之外，但仍是表单的一部分</p>
<button type="submit" form="nameform" value="Submit">提交</button>

select

定义下拉列表，可以包含任意数量的option和optgroup标签，标签特性如下所示。

autofocus    页面加载后自动获得焦点
disabled    禁用控件
form    规定文本区域所属的一个或多个表单
multiple    允许多选
name    规定下拉列表的名称
size    规定下拉列表中可见选项的数目,size不可为0,默认为1

option标签

定义下拉列表的选项。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    规定禁用该选项组(可选)

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

textarea标签

定义多行文本输入控件，文本区可容纳无限数量的文本。注意，浏览器不允许textarea嵌套textarea。标签特性如下所示。

name    规定文本区的名称
value    表示文本区的值
disabled    规定禁用该文本区    
readonly    规定文本区为只读 

注意，ie7及以下版本的浏览器不支持通过setAttribute('disabled','')的写法，必须设置为setAttribute('disabled','disabled')。ie7及以下版本的浏览器不支持通过JS设置readonly特性。

<input id="btn1" type="button" value="禁用">
<input id="btn2" type="button" value="启用">
<input id="btn3" type="button" value="只读">
<input id="btn4" type="button" value="读写">
<textarea id="test">测试内容</textarea>
<script>
    btn1.onclick = function(){
        test.setAttribute('disabled','');
    };
    btn2.onclick = function(){
        test.removeAttribute('disabled');
    };    
    btn3.onclick = function(){
        test.setAttribute('readonly','readonly');
    };
    btn4.onclick = function(){
        test.removeAttribute('readonly');
    };
</script>

form    规定文本区域所属的一个或多个表单，IE浏览器不支持该属性
autofous    规定在页面加载后文本区域自动获得焦点，IE9-浏览器不支持该属性
required    规定文本区域是必填的，IE9-浏览器和safari浏览器不支持该属性
placeholder    规定描述文本区域预期值的简短提示，IE9-浏览器不支持该属性

<input id="btn1" type="button" value="placeholder='123'">
<input id="btn2" type="button" value="placeholder='abc'">
<input id="btn3" type="button" value="必填">
<input id="btn4" type="button" value="可不填">
<form action="#">
    <textarea id="test" placeholder="测试内容"></textarea>    
    <input type="submit">
</form>
<script>
    var test = document.getElementById('test');
    btn1.onclick = function(){
        test.setAttribute('placeholder','123');
    };
    btn2.onclick = function(){
        test.setAttribute('placeholder','abc');
    };    
    btn3.onclick = function(){
        test.setAttribute('required','');
    };
    btn4.onclick = function(){
        test.removeAttribute('required');
    };
</script>

maxlength    规定文本区域的最大字符数，IE9-浏览器不支持该属性

<input id="btn1" type="button" value="0">
<input id="btn2" type="button" value="1">
<input id="btn3" type="button" value="6">
<input id="btn4" type="button" value="默认">
<textarea id="test"></textarea>    
<script>
    btn1.onclick = function(){
        test.setAttribute('maxlength','0');
    };
    btn2.onclick = function(){
        test.setAttribute('maxlength','1');
    };    
    btn3.onclick = function(){
        test.setAttribute('maxlength','6');
    };
    btn4.onclick = function(){
        test.removeAttribute('maxlength');
    };
</script>

cols 　　 规定文本区内的可见列数
rows 　　 规定文本区内的可见行数

注意，可以用cols和rows来规定textarea的尺寸，但更好的办法是使用CSS的height和width属性。

<form action="#">
    cols:<input id="cols" pattern="\d" placeholder="请输入0-9的数字"><br>
    rows:<input id="rows" pattern="\d" placeholder="请输入0-9的数字">
    <input id="set" type="submit" value="设置">    
    <textarea id="test"></textarea>        
</form>
<script>
    var cols = document.getElementById('cols');
    var rows = document.getElementById('rows');
    var test = document.getElementById('test');
    var set = document.getElementById('set');
    set.onclick = function(){
        test.setAttribute('cols',cols.value);
        test.setAttribute('rows',rows.value);
    };
</script>

wrap    规定当在表单中提交时，文本区域中折行如何处理

当特性值为soft时，表示表单提交时，虽然文字在屏幕上折行，但提交的数据里不会有换行符(默认值)。当特性值为hard时，表示表单提交时，提交的数据包含文本换行符%0D%0A。

<!--hard:?test=111111111111111111111%0D%0A1#-->
<!--soft:?test=1111111111111111111111111111#-->
<form action="#">
    <input id="hard" type="button" value="wrap:hard">
    <input id="soft" type="button" value="wrap:soft(默认)">
    <input id="set" type="submit" value="设置">    
    <textarea id="test" name="test"></textarea>        
</form>
<script>
    var hard = document.getElementById('hard');
    var soft = document.getElementById('soft');
    var test = document.getElementById('test');
    var set = document.getElementById('set');
    hard.onclick = function(){
        test.setAttribute('wrap','hard');
    }
    soft.onclick = function(){
        test.setAttribute('wrap','soft');
    }
</script>

fieldset标签

用于将表单内的相关元素分组，提升可访问性，多数浏览器用一个简单的边框来显示fieldset。特性值如下所示。

disabled    禁用fieldset
form    规定fieldset所属的一个或多个表单  
name    规定fieldset的名称

legend标签

用于定义fieldset标签的标题。

<fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
</fieldset>

label标签

为input标签定义标注，建立文字标签与表单控件的关联。在label标签内点击文本会触发此控件，选择该文本时浏览器会自动把焦点转移到和标签相关的表单控件上。标签特性值如下所示。

for    规定label绑定到哪个表单控件
form    规定label字段所属的一个或多个表单

label标签有两种用法，其一使用for特性，其二将表单控件嵌套到label标签内部。ie6浏览器只识别使用for特性的方法。

注意，label标签的for特性值为绑定表单控件的id特性值。

<h4>使用for方法</h4>
<label for="male">Male</label>
<input type="radio" name="sex1" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex1" id="female" />
<h4>使用嵌套方法</h4>
<label>Male<input type="radio" name="sex2" /></label>
<br />
<label>Female<input type="radio" name="sex2"  /></label>

label标签有三个JS属性，分别是form、htmlFor和control。

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>

三、新增控件

datalist    定义输入域的选项列表
keygen    定义密钥对生成器，用于生成密钥
output    用于显示计算的结果
progress    用于显示进度(前进量)
meter    用于显示度量(剩余量)

datalist标签

规定输入域的选项列表，列表是通过option标签创建的。若要把datalist绑定到输入域，需要把输入域的list特性值设置为datalist的id特性值。option标签一定要设置value特性。注意，ie9及以下版本的浏览器及safari浏览器不支持。

<form action="#">
    <input list="list" name="input">
    <datalist id="list">
        <option value="1">
        <option value="2">
        <option value="3">
    </datalist>
</form>

keygen标签

规定表单的密钥生成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器。注意，safari和ie不支持该属性，chrome部分支持该属性。

autofocus    页面加载时获得焦点
challenge    如果使用,则将keygen的值设置为在提交时询问
disabled    禁用keygen字段
form    定义所属的一个或多个表单
keytype    定义keytype,rsa生成RSA密钥(默认)
name    定义keygen元素的唯一名称

<!--firefox: 1->usr_name=1&security=MIIBOjCBpDCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEA1HUwmm%2B75QTnuDXC%0D%0AnUsL8cD8KkncFnA6TRaJttYss0Oi6dVzOPOtdK0O7wxD4%2BIhjSMZRD%2FddKFciZw0%0D%0AURyAimXxe%2FlDKmR3Nb1SzmqA7RJnns%2FA%2BduiYeeIIiMSL2ydUOvQvVFYMtaDkWra%0D%0AtpQfeWv1Hjz9hb7HlGzOUbtGrAECAwEAARYAMA0GCSqGSIb3DQEBBAUAA4GBAJ0I%0D%0ATWv7CdcNzqkaq5OpN6GHWtrlIpD5UAL%2FOiFDICb%2F8PFgV7FQk0MaGwj5XzQfEu4B%0D%0A6YlAbyz2l91I9%2FJW6Oerru5wL646OpvnTvD2U%2FzByU%2FHWp0BRNeDqntMAsGvzl6D%0D%0AoNsHTwLjDUGYVILge4syfcQVRpFRZiyVRaNlIJT9#-->
<form action="#">
    Username: <input type="text" name="usr_name" />
    Encryption: <keygen name="security"  />
    <input type="submit" />
</form>

output标签

用于显示计算的结果。这是一个语义化标签，定义不同类型的输出，比如脚本的输出。注意，ie浏览器不支持该标签。标签特性如下所示。

for    定义输出域相关的一个或多个标签
form    定义输入字段所属的一个或多个表单
name    定义对象的唯一名称

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    0<input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>

progress标签

用来表示任务的进度或进程(常用于表示过程)。注意，ie9及以下版本的浏览器及safari浏览器不支持。

max    规定任务一共需要多少工作
value    规定已完成多少工作

如果progress控件什么属性都不设置，则会有进度条左右往返运动的效果。

<progress></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    规定标签所属的一个或多个表单
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>