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伪元素实现复杂的渲染，而<input>只有文本值属性

//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">可多选</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嵌套textarea

【默认样式】

chrome/firefox/safari/IE
    padding: 2px;
    border: 1px solid;

【默认宽高】

chrome
    width: 137px;
    height: 30px;
firefox
    width: 181px;
    height: 51px;
safari
    width: 181px;
    height: 32px;
IE9+
    width: 160px;
    height: 30px;

注意：IE8-浏览器宽高设置不包含滚动条；其他浏览器宽高设置包含滚动条

【样式重置】

overflow: auto;
resize: none;
float: left;
outline: none;

【属性】

name  规定文本区的名称

value  表示文本区的值

disabled  规定禁用该文本区

注意：IE7-浏览器不支持通过setAttribute('disabled','')的写法，必须设置为setAttribute('disabled','disabled')

readonly  规定文本区为只读

注意：IE7-浏览器不支持通过javascript设置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  规定当在表单中提交时，文本区域中折行如何处理

当wrap="soft"，表示表单提交时，虽然文字在屏幕上折行，但提交的数据里不会有换行符(默认值)；而当wrap="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元素用于将表单内的相关元素分组，提升可访问性，多数浏览器用一个简单的边框来显示fieldset

【默认样式】

chrome/firefox/safari
    display:block;
    margin: 0 2px;
    border: 2px groove threedface;
    padding: 5px 12px 10px;
IE9+
    display: block;
    margin: 0 2px;
    border: 1px solid;
    padding: 3px 3px 4px;
IE8
    display: block;
    margin: 0 2px;
    border: 1px solid;
    padding: 1px 3px 4px;
IE7-
    display: block;
    border: 1px solid;
    padding: 1px 3px 4px;

【属性】

disabled  禁用fieldset

form  规定fieldset所属的一个或多个表单

name  规定fieldset的名称

legend

legend元素用于定义fieldset元素的标题

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

label

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

label元素有两种用法：一种是使用for属性，另一种是将表单控件嵌套到label内部。但IE6浏览器只识别使用for属性的方法

【属性】

for  规定label绑定到哪个表单元素

form  规定label字段所属的一个或多个表单

注意：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>

【js属性】

label控件有三个javascript属性，分别是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

datalist元素规定输入域的选项列表，列表是通过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

keygen规定用于表单的密钥生成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器

注意：safari和IE不支持该属性，chrome部分支持该属性

【属性】

autofocus  使用keygen字段在页面加载时获得焦点

challenge  如果使用，则将keygen的值设置为在提交时询问

disabled  禁用keygen字段

form  定义该keygen字段所属的一个或多个表单

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

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

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

一个不是计算机专业的理科生，转行学前端

如果你也有一个编程梦，这是咱们的前端学习QQ群：784-783-012

（在线学习，8个月时间，目前就业，广州工作，月薪16k）

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,142评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,298评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,068评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,081评论 1赞 291
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,099评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,071评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,990评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,832评论 0赞 273
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,274评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,488评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,649评论 1赞 347
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,378评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,979评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,625评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,643评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,545评论 2赞 352

推荐阅读更多精彩内容

  • HTML建立表单
    建立表单（form元素) form元素可以指定下面的内容:(1)表单的布局。(2)指定处理表单的服务嘴程序URI地...
    依米_xx阅读 408评论 0赞 0
  • 09.HTML表单
    HTML表单HTML表单用于搜集用户输入HTML表单常用属性及说明:属性描述accept-charset规定在被提...
    Lv_0阅读 469评论 0赞 1
  • Javascript中的Form表单知识点总结
    本人做php的,最近发现JS真的是博大精深啊,比PHP难.在HTML中，表单是由form元素来表示的，但是在jav...
    linfree阅读 2,155评论 3赞 17
  • Form表单的使用
    form简介 是HTML中的一个元素，它表示文档中的一个区域，这个区域包含了交互控件，用于向web服务器提交信息。...
    七里之境阅读 1,328评论 0赞 1
  • 15年后的我
    在15年后，我已经25岁了。我从当初的那一个无知的小学生变成了一位科学家。在实验室里研究植物。 早...
    徐梓洋洋阅读 532评论 0赞 2