了解HTML表单之13个表单控件_html/css_WEB-ITnose

目录传统控件

【默认样式】

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 　　　　　规定禁用该选项组(可选)

 启用  禁用  可多选  不可多选  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 　　　　规定文本区的名称

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

 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

【默认样式】

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

新增控件

　　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#

output

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

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

【属性】

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

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

　　name 　　定义对象的唯一名称

progress

　　progress元素用来标示任务的进度或进程

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

【属性】

　　max 　　　　规定任务一共需要多少工作

　　value 　　　规定已经完成多少工作

 下载进度：   var oTimer;btn.onclick = function(){    if(oTimer){        return;    }    oTimer = setInterval(function(){        test.value++;        if(test.value >= test.max){            clearInterval(oTimer);        }    },50);     }

meter

　　meter元素用于显示剩余容量或剩余库存

　　[注意]IE浏览器及safari浏览器不支持

【属性】

　　form 　　　　规定meter元素所属的一个或多个表单

　　high 　　　　规定被视作高的值的范围

　　low 　　　　规定被视作低的值的范围

　　max 　　　　规定范围的最大值

　　min 　　　　规定范围的最小值

　　optimum 　　规定度量的最优值

　　value 　　　规定度量的当前值(必需)

　　[注意]min 小于 low 小于 high 小于 max

 库存量：   var oTimer;btn.onclick = function(){    if(oTimer){        return;    }    oTimer = setInterval(function(){        test.value++;        if(test.value >= test.max){            clearInterval(oTimer);        }    },50);     };

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did110928

更新时间：2022-11-17 阅读：50次