html中自动填写控件,HTML表单控件-CSDN博客

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属性的内容

元素比元素更易样式化。可以添加内联HTML内容(如， 甚至)，并使用:after和:before伪元素实现复杂的渲染，而只有文本值属性

//IE7-浏览器:按下提交按钮时，URL添加?btn=1

//其他浏览器:按下button按钮时，URL添加?btn=2

专门建立的学习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，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧

(从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划)

启用

禁用

可多选

不可多选

size=1

size=2

size=3

不设置size

一

二

三

四

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');

}

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

测试内容

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');

};

form 规定文本区域所属的一个或多个表单

注意：IE浏览器不支持该属性

autofous 规定在页面加载后文本区域自动获得焦点

注意：IE9-浏览器不支持该属性

required 规定文本区域是必填的

注意：IE9-浏览器和safari浏览器不支持该属性

placeholder 规定描述文本区域预期值的简短提示

注意：IE9-浏览器不支持该属性

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');

};

maxlength 规定文本区域的最大字符数

注意：IE9-浏览器不支持该属性

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');

};

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

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

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

cols:

rows:

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

};

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

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

//hard:?test=111111111111111111111%0D%0A1#

//soft:?test=1111111111111111111111111111#

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');

}

fieldset

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

【默认样式】

专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧

(从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划)

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元素的标题

健康信息

身高：

体重：

label

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

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

【属性】

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

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

注意：label标签的for属性要与相关元素的id属性相同

使用for方法

Male

Female

使用嵌套方法

Male

Female

【js属性】

label控件有三个javascript属性，分别是form、htmlFor和control

form表示label控件所归属的表单

htmlFor表示label控件的for属性的字符串值

control表示label控件所指定的input控件(注意：IE浏览器不支持)

我是label

var myLabel = document.getElementById('myLabel');

console.log(myLabel.form);//

console.log(myLabel.htmlFor);//'myFile'

console.log(myLabel.control);//

新增控件

datalist 定义输入域的选项列表

keygen 定义密钥对生成器，用于生成密钥

output 用于显示计算的结果

progress 用于显示进度(前进量)

meter 用于显示度量(剩余量)

datalist

datalist元素规定输入域的选项列表，列表是通过datalist内的option元素创建的。如果需要把datalist绑定到输入域，需要把输入域的list属性引用datalist的id。option元素一定要设置value属性

注意：IE9-浏览器及safari浏览器不支持

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#

Username:

Encryption:

output

output元素用于显示计算的结果，这是一个语义化标签，定义不同类型的输出，比如脚本的输出

注意：IE浏览器不支持该属性

【属性】

for 定义输出域相关的一个或多个元素

form 定义输入字段所属的一个或多个元素

name 定义对象的唯一名称

0100

progress

progress元素用来标示任务的进度或进程(常用于表示过程)