ディレクトリ 従来のコントロール
ボタン選択オプション optgroup textarea fieldset 凡例ラベル
新しいコントロールdatalist keygen 出力進捗メーター
input 要素は間違いなく大きくて複雑な要素ですが、それだけではありませんフォームコントロール。また、8 つの従来のフォーム コントロール: button、select、option、optgroup、textarea、fieldset、label、legend と、5 つの新しいフォーム コントロール: datalist、progress、meter、output、keygen があります
ボタン 定義ボタン
選択グループフォーム内の関連要素
legend fieldset要素のタイトルを定義
labelただし、唯一禁止されている要素はイメージ マップです。マウスやキーボードに依存するアクションはフォーム ボタンの動作に干渉するためです
常にボタン要素の type 属性を設定します (IE7 - ブラウザのデフォルトのタイプはボタンです)。その他のブラウザ デフォルトのタイプは submit です
IE7 - ボタン要素間のテキストを送信しますが、他のブラウザは value 属性の内容を送信します
//IE7-浏览器:按下提交按钮时，URL添加?btn=1//其他浏览器:按下button按钮时，URL添加?btn=2<form action="#" ><button value="2" name="btn">1</button><input type="submit"></form>
autofocus ボタンが自動的にフォーカスを取得することを指定しますページが読み込まれます
Disabled ボタンを無効にすることを指定します
form 1 つ以上のフォームのボタン属性を指定します
formaction form 要素の action 属性をオーバーライドします
formenctype form 要素の enctype 属性をオーバーライドします
formmethodフォーム要素のメソッド属性をオーバーライド
formnovaliadate フォームをオーバーライド 要素のnovalidate属性をオーバーライド
name ボタンの名前を指定
type
select要素が使用されています任意の数の option 要素と optgroup 要素を含むドロップダウン リストを定義します[属性]
autofocus ページが読み込まれた後にテキスト領域が自動的にフォーカスを取得することを指定します
disabledページが読み込まれます 規定複数選択可能です
お名前]IE8-browser box-sizing:content-box; while other browsers box-sizing:border-box
【デフォルトの幅と高さ】
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;
【注意】Safariブラウザでは使用できません。 set height
option
option 要素には、ドロップダウン リストの選択で使用されるほかに、オプションで使用することもできます。 list datalist
詳細情報はここに移動します
【属性】
disabled 最初のロード時にこのオプションを無効にすることを指定します
label hand overlain >> ラベルを定義しますoptgroup を使用するときに使用され、option 要素の内容を置き換えます
【注意】Firefoxはlabel属性をサポートしていません
selected リストに最初に表示されたときのオプションの動作を指定します 選択状態の場合
her Up in iniana >> 【注意】値を設定する際、サーバーは値の値を送信します。それ以外の場合は、option 要素の内容がサーバーに送信されます。
[デフォルトのスタイル]
chrome width:65px; height:16px;firefox width:54px; height:21px;safari width: 56px; height: 15px;IE8+ width:74px; height:17px;
[注] オプションでは、マージン、パディング、ボーダーなどのボックス モデル スタイルを設定できません。
optgroup
optgroup 要素は、オプションを組み合わせるために使用されるオプショングループを定義します
[注意] optgroup は、マージン、パディング、ボーダーなどのボックスモデルのスタイルを設定できません
【属性】
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
【默认样式】
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属性
<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
【默认样式】
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元素用于定义fieldset元素的标题
<fieldset> <legend>健康信息</legend> 身高：<input type="text" /> 体重：<input type="text" /></fieldset>
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>
datalist 定义输入域的选项列表
keygen 定义密钥对生成器，用于生成密钥
output 用于显示计算的结果
progress 用于显示进度(前进量)
meter 用于显示度量(剩余量)
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规定用于表单的密钥生成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器
[注意]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#<br /><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 规定已经完成多少工作
<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元素用于显示剩余容量或剩余库存
[注意]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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
