2023年6月20日发(作者：)
radiohtml菜鸟,菜鸟新⼿学习：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元素的标注buttonbutton元素⽤来定义⼀个按钮，button元素内部可以放置⽂本或图像或其他多媒体内容。但唯⼀禁⽌使⽤的元素是图像映射，因为它对⿏标和键盘敏感的动作会⼲扰表单按钮的⾏为始终为button元素设置type属性，IE7-浏览器的默认类型是button，⽽其他浏览器的默认类型是submitIE7-提交button元素之间的⽂本，⽽其他浏览器则会提交value属性的内容元素⽐元素更易样式化。可以添加内联HTML内容(如， 甚⾄)，并使⽤:after和:before伪元素实现复杂的渲染，⽽只有⽂本值属性//IE7-浏览器:按下提交按钮时，URL添加?btn=1//其他浏览器:按下button按钮时，URL添加?btn=21【默认样式】chrome/safaripadding: 1px 6px;border-width:1px;firefoxpadding: 0px 6px;border-width:2px;IE8-IE11padding: 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 规定按钮的初始值selectselect元素⽤来定义⼀个下拉列表，包含任意数量的option和optgroup元素【属性】autofocus 规定在页⾯加载后⽂本区域⾃动获得焦点disabled 规定禁⽤该下拉列表form 规定⽂本区域所属的⼀个或多个表单multiple 规定可选择多个选项name 规定下拉列表的名称size 规定下拉列表中可见选项的数⽬注意：size不可为0，默认为1【默认样式】chrome/safariborder: 1px solid;box-sizing: border-box;firefoxpadding: 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【默认宽⾼】chromewidth:65px;height:16px;firefoxwidth:54px;height:21px;safariwidth: 56px;height: 15px;IE8+width:74px;height:17px;注意：safari浏览器⽆法设置⾼度optionoption元素定义下拉列表中的⼀个选项option元素有两种应⽤场景，除了⽤于下拉列表select外，还可以⽤于选项列表datalist中【属性】disabled 规定此选项应在⾸次加载时被禁⽤label 定义当使⽤optgroup时所使⽤的标注，替代option元素内容注意：firefox不⽀持label属性selected 规定选项在⾸次显⽰在列表中时表现为选中状态value 定义送往服务器的选项值注意：当设置value值时，服务器提交的是value的值；否则提交给服务器的是option的元素内容【默认样式】chromepadding: 0 2px 1px;注意：option⽆法设置margin、padding、border等盒模型样式optgroupoptgroup元素定义选项组，⽤于组合选项注意：optgroup⽆法设置margin、padding、border等盒模型样式【属性】label 为选项组规定描述(必须)disabled 规定禁⽤该选项组(可选)启⽤禁⽤可多选不可多选size=1size=2size=3不设置size1234abcd⼀⼆三四var select = mentById('select');k = function(){Attribute('disabled');}k = function(){ribute('disabled','');}k = function(){ribute('multiple','');}k = function(){Attribute('multiple');}k = function(){ribute('size','1');}k = function(){ribute('size','2');}k = function(){ribute('size','3');}k = function(){Attribute('size');}textareatextarea定义多⾏的⽂本输⼊控件，⽂本区可容纳⽆限数量的⽂本注意：浏览器不允许textarea嵌套textarea【默认样式】chrome/firefox/safari/IEpadding: 2px;border: 1px solid;【默认宽⾼】chromewidth: 137px;height: 30px;firefoxwidth: 181px;height: 51px;safariwidth: 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属性测试内容k = function(){ribute('disabled','');};k = function(){Attribute('disabled');};k = function(){ribute('readonly','readonly');};k = function(){Attribute('readonly');};form规定⽂本区域所属的⼀个或多个表单注意：IE浏览器不⽀持该属性autofous 规定在页⾯加载后⽂本区域⾃动获得焦点注意：IE9-浏览器不⽀持该属性required 规定⽂本区域是必填的注意：IE9-浏览器和safari浏览器不⽀持该属性placeholder 规定描述⽂本区域预期值的简短提⽰注意：IE9-浏览器不⽀持该属性var test = mentById('test');k = function(){ribute('placeholder','123');};k = function(){ribute('placeholder','abc');};k = function(){ribute('required','');};k = function(){Attribute('required');};maxlength规定⽂本区域的最⼤字符数注意：IE9-浏览器不⽀持该属性k = function(){ribute('maxlength','0');};k = function(){ribute('maxlength','1');};k = function(){ribute('maxlength','6');};k = function(){Attribute('maxlength');};cols 规定⽂本区内的可见列数rows 规定⽂本区内的可见⾏数注意：可以⽤cols和rows来规定textarea的尺⼨，但更好的办法是使⽤CSS的height和width属性cols:rows:var cols = mentById('cols');var rows = mentById('rows');var test = mentById('test');var set = mentById('set');k = function(){ribute('cols',);ribute('rows',);};wrap 规定当在表单中提交时，⽂本区域中折⾏如何处理当wrap=“soft”，表⽰表单提交时，虽然⽂字在屏幕上折⾏，但提交的数据⾥不会有换⾏符(默认值)；⽽当wrap=“hard”，表⽰表单提交时，提交的数据包含⽂本换⾏符%0D%0A//hard:?test=1111111111%0D%0A1#//soft:?test=111111#var hard = mentById('hard');var soft = mentById('soft');var test = mentById('test');var set = mentById('set');k = function(){ribute('wrap','hard');}k = function(){ribute('wrap','soft');}fieldsetfieldset元素⽤于将表单内的相关元素分组，提升可访问性，多数浏览器⽤⼀个简单的边框来显⽰fieldset【默认样式】chrome/firefox/safaridisplay: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;IE8display: block;margin: 0 2px;border: 1px solid;padding: 1px 3px 4px;IE7-display: block;border: 1px solid;padding: 1px 3px 4px;【属性】disabled 禁⽤fieldsetform 规定fieldset所属的⼀个或多个表单name 规定fieldset的名称legendlegend元素⽤于定义fieldset元素的标题健康信息⾝⾼：体重：labellabel元素为input元素定义标注，建⽴⽂字标签与表单控件的关联。在label元素内点击⽂本会触发此控件，选择该⽂本时浏览器会⾃动把焦点转到和标签相关的表单控件上label元素有两种⽤法：⼀种是使⽤for属性，另⼀种是将表单控件嵌套到label内部。但IE6浏览器只识别使⽤for属性的⽅法【属性】for 规定label绑定到哪个表单元素form 规定label字段所属的⼀个或多个表单注意：label标签的for属性要与相关元素的id属性相同使⽤for⽅法MaleFemale使⽤嵌套⽅法MaleFemale【js属性】label控件有三个javascript属性，分别是form、htmlFor和controlform表⽰label控件所归属的表单htmlFor表⽰label控件的for属性的字符串值control表⽰label控件所指定的input控件(注意：IE浏览器不⽀持)我是labelvar myLabel = mentById('myLabel');();//(r);//'myFile'(l);//新增控件datalist 定义输⼊域的选项列表keygen 定义密钥对⽣成器，⽤于⽣成密钥output ⽤于显⽰计算的结果progress ⽤于显⽰进度(前进量)meter ⽤于显⽰度量(剩余量)datalistdatalist元素规定输⼊域的选项列表，列表是通过datalist内的option元素创建的。如果需要把datalist绑定到输⼊域，需要把输⼊域的list属性引⽤datalist的id。option元素⼀定要设置value属性注意：IE9-浏览器及safari浏览器不⽀持keygenkeygen规定⽤于表单的密钥⽣成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器注意：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%0AnUsL8Username:Encryption:outputoutput元素⽤于显⽰计算的结果，这是⼀个语义化标签，定义不同类型的输出，⽐如脚本的输出注意：IE浏览器不⽀持该属性【属性】for 定义输出域相关的⼀个或多个元素form 定义输⼊字段所属的⼀个或多个元素name 定义对象的唯⼀名称0100+=progressprogress元素⽤来标⽰任务的进度或进程(常⽤于表⽰过程)注意：IE9-浏览器及safari浏览器不⽀持【属性】max 规定任务⼀共需要多少⼯作value 规定已经完成多少⼯作如果progress控件什么属性都不设置，则会有进度条左右往返运动的效果下载进度：var oTimer;k = function(){if(oTimer){return;}oTimer = setInterval(function(){++;if( >= ){clearInterval(oTimer);}},50);}metermeter元素⽤于显⽰剩余容量或剩余库存(常⽤于表⽰状态)注意：IE浏览器及safari浏览器不⽀持【属性】form 规定meter元素所属的⼀个或多个表单high 规定被视作⾼的值的范围low 规定被视作低的值的范围max 规定范围的最⼤值min 规定范围的最⼩值optimum 规定度量的最优值value 规定度量的当前值(必需)注意：min ⼩于 low ⼩于 high ⼩于 max库存量：var oTimer;k = function(){if(oTimer){return;}oTimer = setInterval(function(){++;if( >= ){clearInterval(oTimer);}},50);};如果meter标签的value属性，取值为⼩数，如0.3，且没有max属性值时，则颜⾊块显⽰为宽⾼的30%
2023年6月20日发(作者：)
radiohtml菜鸟,菜鸟新⼿学习：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元素的标注buttonbutton元素⽤来定义⼀个按钮，button元素内部可以放置⽂本或图像或其他多媒体内容。但唯⼀禁⽌使⽤的元素是图像映射，因为它对⿏标和键盘敏感的动作会⼲扰表单按钮的⾏为始终为button元素设置type属性，IE7-浏览器的默认类型是button，⽽其他浏览器的默认类型是submitIE7-提交button元素之间的⽂本，⽽其他浏览器则会提交value属性的内容元素⽐元素更易样式化。可以添加内联HTML内容(如， 甚⾄)，并使⽤:after和:before伪元素实现复杂的渲染，⽽只有⽂本值属性//IE7-浏览器:按下提交按钮时，URL添加?btn=1//其他浏览器:按下button按钮时，URL添加?btn=21【默认样式】chrome/safaripadding: 1px 6px;border-width:1px;firefoxpadding: 0px 6px;border-width:2px;IE8-IE11padding: 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 规定按钮的初始值selectselect元素⽤来定义⼀个下拉列表，包含任意数量的option和optgroup元素【属性】autofocus 规定在页⾯加载后⽂本区域⾃动获得焦点disabled 规定禁⽤该下拉列表form 规定⽂本区域所属的⼀个或多个表单multiple 规定可选择多个选项name 规定下拉列表的名称size 规定下拉列表中可见选项的数⽬注意：size不可为0，默认为1【默认样式】chrome/safariborder: 1px solid;box-sizing: border-box;firefoxpadding: 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【默认宽⾼】chromewidth:65px;height:16px;firefoxwidth:54px;height:21px;safariwidth: 56px;height: 15px;IE8+width:74px;height:17px;注意：safari浏览器⽆法设置⾼度optionoption元素定义下拉列表中的⼀个选项option元素有两种应⽤场景，除了⽤于下拉列表select外，还可以⽤于选项列表datalist中【属性】disabled 规定此选项应在⾸次加载时被禁⽤label 定义当使⽤optgroup时所使⽤的标注，替代option元素内容注意：firefox不⽀持label属性selected 规定选项在⾸次显⽰在列表中时表现为选中状态value 定义送往服务器的选项值注意：当设置value值时，服务器提交的是value的值；否则提交给服务器的是option的元素内容【默认样式】chromepadding: 0 2px 1px;注意：option⽆法设置margin、padding、border等盒模型样式optgroupoptgroup元素定义选项组，⽤于组合选项注意：optgroup⽆法设置margin、padding、border等盒模型样式【属性】label 为选项组规定描述(必须)disabled 规定禁⽤该选项组(可选)启⽤禁⽤可多选不可多选size=1size=2size=3不设置size1234abcd⼀⼆三四var select = mentById('select');k = function(){Attribute('disabled');}k = function(){ribute('disabled','');}k = function(){ribute('multiple','');}k = function(){Attribute('multiple');}k = function(){ribute('size','1');}k = function(){ribute('size','2');}k = function(){ribute('size','3');}k = function(){Attribute('size');}textareatextarea定义多⾏的⽂本输⼊控件，⽂本区可容纳⽆限数量的⽂本注意：浏览器不允许textarea嵌套textarea【默认样式】chrome/firefox/safari/IEpadding: 2px;border: 1px solid;【默认宽⾼】chromewidth: 137px;height: 30px;firefoxwidth: 181px;height: 51px;safariwidth: 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属性测试内容k = function(){ribute('disabled','');};k = function(){Attribute('disabled');};k = function(){ribute('readonly','readonly');};k = function(){Attribute('readonly');};form规定⽂本区域所属的⼀个或多个表单注意：IE浏览器不⽀持该属性autofous 规定在页⾯加载后⽂本区域⾃动获得焦点注意：IE9-浏览器不⽀持该属性required 规定⽂本区域是必填的注意：IE9-浏览器和safari浏览器不⽀持该属性placeholder 规定描述⽂本区域预期值的简短提⽰注意：IE9-浏览器不⽀持该属性var test = mentById('test');k = function(){ribute('placeholder','123');};k = function(){ribute('placeholder','abc');};k = function(){ribute('required','');};k = function(){Attribute('required');};maxlength规定⽂本区域的最⼤字符数注意：IE9-浏览器不⽀持该属性k = function(){ribute('maxlength','0');};k = function(){ribute('maxlength','1');};k = function(){ribute('maxlength','6');};k = function(){Attribute('maxlength');};cols 规定⽂本区内的可见列数rows 规定⽂本区内的可见⾏数注意：可以⽤cols和rows来规定textarea的尺⼨，但更好的办法是使⽤CSS的height和width属性cols:rows:var cols = mentById('cols');var rows = mentById('rows');var test = mentById('test');var set = mentById('set');k = function(){ribute('cols',);ribute('rows',);};wrap 规定当在表单中提交时，⽂本区域中折⾏如何处理当wrap=“soft”，表⽰表单提交时，虽然⽂字在屏幕上折⾏，但提交的数据⾥不会有换⾏符(默认值)；⽽当wrap=“hard”，表⽰表单提交时，提交的数据包含⽂本换⾏符%0D%0A//hard:?test=1111111111%0D%0A1#//soft:?test=111111#var hard = mentById('hard');var soft = mentById('soft');var test = mentById('test');var set = mentById('set');k = function(){ribute('wrap','hard');}k = function(){ribute('wrap','soft');}fieldsetfieldset元素⽤于将表单内的相关元素分组，提升可访问性，多数浏览器⽤⼀个简单的边框来显⽰fieldset【默认样式】chrome/firefox/safaridisplay: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;IE8display: block;margin: 0 2px;border: 1px solid;padding: 1px 3px 4px;IE7-display: block;border: 1px solid;padding: 1px 3px 4px;【属性】disabled 禁⽤fieldsetform 规定fieldset所属的⼀个或多个表单name 规定fieldset的名称legendlegend元素⽤于定义fieldset元素的标题健康信息⾝⾼：体重：labellabel元素为input元素定义标注，建⽴⽂字标签与表单控件的关联。在label元素内点击⽂本会触发此控件，选择该⽂本时浏览器会⾃动把焦点转到和标签相关的表单控件上label元素有两种⽤法：⼀种是使⽤for属性，另⼀种是将表单控件嵌套到label内部。但IE6浏览器只识别使⽤for属性的⽅法【属性】for 规定label绑定到哪个表单元素form 规定label字段所属的⼀个或多个表单注意：label标签的for属性要与相关元素的id属性相同使⽤for⽅法MaleFemale使⽤嵌套⽅法MaleFemale【js属性】label控件有三个javascript属性，分别是form、htmlFor和controlform表⽰label控件所归属的表单htmlFor表⽰label控件的for属性的字符串值control表⽰label控件所指定的input控件(注意：IE浏览器不⽀持)我是labelvar myLabel = mentById('myLabel');();//(r);//'myFile'(l);//新增控件datalist 定义输⼊域的选项列表keygen 定义密钥对⽣成器，⽤于⽣成密钥output ⽤于显⽰计算的结果progress ⽤于显⽰进度(前进量)meter ⽤于显⽰度量(剩余量)datalistdatalist元素规定输⼊域的选项列表，列表是通过datalist内的option元素创建的。如果需要把datalist绑定到输⼊域，需要把输⼊域的list属性引⽤datalist的id。option元素⼀定要设置value属性注意：IE9-浏览器及safari浏览器不⽀持keygenkeygen规定⽤于表单的密钥⽣成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器注意：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%0AnUsL8Username:Encryption:outputoutput元素⽤于显⽰计算的结果，这是⼀个语义化标签，定义不同类型的输出，⽐如脚本的输出注意：IE浏览器不⽀持该属性【属性】for 定义输出域相关的⼀个或多个元素form 定义输⼊字段所属的⼀个或多个元素name 定义对象的唯⼀名称0100+=progressprogress元素⽤来标⽰任务的进度或进程(常⽤于表⽰过程)注意：IE9-浏览器及safari浏览器不⽀持【属性】max 规定任务⼀共需要多少⼯作value 规定已经完成多少⼯作如果progress控件什么属性都不设置，则会有进度条左右往返运动的效果下载进度：var oTimer;k = function(){if(oTimer){return;}oTimer = setInterval(function(){++;if( >= ){clearInterval(oTimer);}},50);}metermeter元素⽤于显⽰剩余容量或剩余库存(常⽤于表⽰状态)注意：IE浏览器及safari浏览器不⽀持【属性】form 规定meter元素所属的⼀个或多个表单high 规定被视作⾼的值的范围low 规定被视作低的值的范围max 规定范围的最⼤值min 规定范围的最⼩值optimum 规定度量的最优值value 规定度量的当前值(必需)注意：min ⼩于 low ⼩于 high ⼩于 max库存量：var oTimer;k = function(){if(oTimer){return;}oTimer = setInterval(function(){++;if( >= ){clearInterval(oTimer);}},50);};如果meter标签的value属性，取值为⼩数，如0.3，且没有max属性值时，则颜⾊块显⽰为宽⾼的30%
![[wps演示如何制作滚动条图文教程] wps表格滚动条设置](/uploads/image/0804.jpg)
发布评论