HTML の 13 のフォーム コントロールを理解する form_html/css_WEB-ITnose

ディレクトリ 従来のコントロール

ボタン選択オプション 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 要素は、ドロップダウン リストのオプションを定義します

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嵌套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元素用于将表单内的相关元素分组，提升可访问性，多数浏览器用一个简单的边框来显示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>

新增控件

　　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#<br /><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 　　 　 规定已经完成多少工作

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