HTML 5新規フォーム属性
1.placeholderプロパティ
ユーザがまだ値を入力していない場合、入力型コントロールはplaceholderプロパティを使用してユーザに描画説明またはプロンプト情報を表示することができる.placeholderプロパティを使用するには、そのプロパティ値として説明テキストを使用するだけです.一般的なテキスト入力ボックスのほか、email、number、urlなどの他のタイプの入力ボックスもplaceholderプロパティをサポートしています.
placeholder部品の使用方法は以下の通りです.
text::
2、autocomplete属性
ブラウザはautocompleteプロパティを使用して、将来の使用に備えて入力値を保存すべきかどうかを知ることができます.たとえば、保存しないコードは次のとおりです.
Autocompleteプロパティは、ローカル・エクスプローラが安全に格納されないように、機密ユーザー・データを保護するために使用する必要があります.Autocompleteプロパティでは、「on」「off」と「(指定しない)」の3つの値を指定できます.指定しない場合は、ブラウザのデフォルト値(ブラウザの決定によります)を使用します.このプロパティ値をonに設定すると、指定候補入力のデータリストが表示されます.
ラベルとリスト属性で候補入力を提供するデータテーブルを使用して、自動完了時に、そのラベルのデータを候補入力者のデータとしてテキストボックスに自動的に表示することができます.Autocompleteプロパティの使用方法は次のとおりです.
3. Autofocusプロパティ
テキストボックス、選択ボックス、またはボタンコントロールにこのプロパティを追加し、画面が開くと自動的にカーソルフォーカスを取得します.これまではJavaScriptを使用する必要がありましたが、autofocusの適切な使用方法は以下の通りです.
1つのページがコントロールの使用を主な目的としている場合にのみ、autofocusプロパティが使用されます.1つのページには、このプロパティを持つコントロールが1つしかありません.
実際の角度から言えば、この属性を勝手に乱用しないでください.
4.リスト属性
HTML 5では、単一行テキストボックスにラベルのidの値を持つlist属性が追加されます.ラベルもHTML 5に追加されたラベルで、選択ボックス(select)に似ていますが、ユーザーが設定したい値が選択リスト内にない場合は、自分で入力できます.このラベル自体は表示されず、テキストボックスがフォーカスされたときにプロンプト入力で表示されます.
このラベルをサポートしていないブラウザで表示エラーが発生しないように、CSSなどで非表示に設定することができます.listプロパティの使用方法は次のコードです.
ユーザがまだ値を入力していない場合、入力型コントロールはplaceholderプロパティを使用してユーザに描画説明またはプロンプト情報を表示することができる.placeholderプロパティを使用するには、そのプロパティ値として説明テキストを使用するだけです.一般的なテキスト入力ボックスのほか、email、number、urlなどの他のタイプの入力ボックスもplaceholderプロパティをサポートしています.
placeholder部品の使用方法は以下の通りです.
text::
2、autocomplete属性
ブラウザはautocompleteプロパティを使用して、将来の使用に備えて入力値を保存すべきかどうかを知ることができます.たとえば、保存しないコードは次のとおりです.
Autocompleteプロパティは、ローカル・エクスプローラが安全に格納されないように、機密ユーザー・データを保護するために使用する必要があります.Autocompleteプロパティでは、「on」「off」と「(指定しない)」の3つの値を指定できます.指定しない場合は、ブラウザのデフォルト値(ブラウザの決定によります)を使用します.このプロパティ値をonに設定すると、指定候補入力のデータリストが表示されます.
ラベルとリスト属性で候補入力を提供するデータテーブルを使用して、自動完了時に、そのラベルのデータを候補入力者のデータとしてテキストボックスに自動的に表示することができます.Autocompleteプロパティの使用方法は次のとおりです.
3. Autofocusプロパティ
テキストボックス、選択ボックス、またはボタンコントロールにこのプロパティを追加し、画面が開くと自動的にカーソルフォーカスを取得します.これまではJavaScriptを使用する必要がありましたが、autofocusの適切な使用方法は以下の通りです.
1つのページがコントロールの使用を主な目的としている場合にのみ、autofocusプロパティが使用されます.1つのページには、このプロパティを持つコントロールが1つしかありません.
実際の角度から言えば、この属性を勝手に乱用しないでください.
4.リスト属性
HTML 5では、単一行テキストボックスにラベルのidの値を持つlist属性が追加されます.ラベルもHTML 5に追加されたラベルで、選択ボックス(select)に似ていますが、ユーザーが設定したい値が選択リスト内にない場合は、自分で入力できます.このラベル自体は表示されず、テキストボックスがフォーカスされたときにプロンプト入力で表示されます.
このラベルをサポートしていないブラウザで表示エラーが発生しないように、CSSなどで非表示に設定することができます.listプロパティの使用方法は次のコードです.
/span>html>
charset="utf-8">
</span><span style="font-family:' ';"> </span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;">
</span>text: <span style="color:#e8bf6a;"><input/><span style="color:#bababa;">type=</span><span style="color:#a5c261;">"text" </span><span style="color:#bababa;">name=</span><span style="color:#a5c261;">"mr" </span><span style="color:#bababa;">list=</span><span style="color:#a5c261;">"mr"</span><span style="color:#e8bf6a;">>
</span><span style="color:#808080;"><!--</span><span style="color:#808080;font-family:' ';"> </span><span style="color:#808080;">style="display: none"</span><span style="color:#808080;font-family:' ';"> </span><span style="color:#808080;">datalist</span><span style="color:#808080;font-family:' ';"> </span><span style="color:#808080;">-->
</span><span style="color:#e8bf6a;"><datalist><span style="color:#bababa;">id=</span><span style="color:#a5c261;">"greetings" </span><span style="color:#bababa;">style=</span><span style="color:#a5c261;">"</span><span style="color:#bababa;">display</span>: <span style="color:#a5c261;">none" </span><span style="color:#e8bf6a;">>
</span><span style="color:#e8bf6a;"> <option><span style="color:#bababa;">value=</span><span style="color:#a5c261;">"123"</span><span style="color:#e8bf6a;">></span>123<span style="color:#e8bf6a;"/></option>
</span><span style="color:#e8bf6a;"> <option><span style="color:#bababa;">value=</span><span style="color:#a5c261;">"456"</span><span style="color:#e8bf6a;">></span>456<span style="color:#e8bf6a;"/></option>
</span><span style="color:#e8bf6a;"> <option><span style="color:#bababa;">value=</span><span style="color:#a5c261;">"789"</span><span style="color:#e8bf6a;">></span>789<span style="color:#e8bf6a;"/></option>
</span><span style="color:#e8bf6a;"/></datalist>
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"/></span></span></span></code></pre>
<p>【 】 Opera 10 list </p>
<h2> 5. min max </h2>
<p> min max ， range 。 ， ， ， 。</p>
<p>【 】 range ， 0%~100%， ：</p>
<p> <strong><span style="color:#ff0000;"><input id="confidence" name="mr" min="o" max="100"/></span></strong></p>
<p> 0、 100 range 。</p>
<span style="background-color:rgb(192,192,192);"> <strong> min 0,max 100。</strong></span>
<br/>
<h2> </h2>
<h2> 6.step </h2>
<p> <strong><span style="color:#ff0000;"> ， step 。</span></strong></p>
<p> ， range step 5：</p> <input name="mr" max="100" step="5" value="0"/>
<br/> ， 5 。 0、5、10 … 100， 。
<br/>
<p> <strong><span style="color:#ff0000;"> step ， range ，step 1。</span></strong></p>
<h2> 7. required </h2>
<p> <strong><span style="color:#ff0000;"> required ， ， 。</span></strong></p>
<p> ， ， required 。</p>
<p> <input type="text" id="firtname" name="mr' reaquired></p>
<p> <strong><span style=" color:=""/>required 。</p>
<h2>8. email </h2>
<div>
email <input/> email 。 email ， email 。 ， required 。
<br/>
<br/>
</div>
<div>
email multiple ， email 。 ， email ， 。
</div>
<div>
<br/>
</div>
<div>
<strong><span style="color:#ff0000;"> email <input/> ：</span></strong>
</div>
<div>
<strong><span style="color:#ff0000;"> <input type="email" value="1530738736@qq.com"/></span></strong>
</div>
<div>
<br/>
</div>
<div>
<h2>9. url </h2> url <input/> url 。 url ， 。
</div>
<div>
</div>
<div>
<strong><span style="color:#ff0000;"> url <input/> :</span></strong>
</div>
<div>
<strong><span style="color:#ff0000;"> <input name="url" type="url" value="http://www.baidu.com"/></span></strong>
</div>
<div>
<br/>
</div>
<h2><span style="color:#000000;">10. date </span></h2>
<div>
date input 。
</div>
<div>
</div>
<div>
<span style="color:#ff0000;"><strong> Date <input/> :<br/> <input/></strong></span>
</div>
<div>
<br/>
</div>
<div>
<h2>11. time </h2> time <input/> ， 。
</div>
<div>
<br/>
</div>
<div>
<span style="color:#ff0000;"><strong>time <input/> ：<br/> <input/></strong></span>
</div>
<div>
<br/>
</div>
<div>
<h2>12. datetime </h2> datetime input UTC ， 。
</div>
<div>
<br/>
</div>
<div>
<strong><span style="color:#ff0000;"> datetime input ：</span></strong>
</div>
<div>
<strong><span style="color:#ff0000;"> <input/></span></strong>
</div>
<div>
<br/>
</div>
<h2>13. datetime-local </h2>
<div>
datetime-local input ， 。
</div>
<div>
<br/>
</div>
<div>
<span style="color:#ff0000;"> datetime-local <input/> :<br/> <input name="datetime-local" type="datetime-local"/></span>
</div>
<div>
<br/>
</div>
<h2>14. month </h2>
<div>
month <input/> ， 。
</div>
<div>
</div>
<div>
<span style="color:#ff0000;"><strong> month <input/> :</strong></span>
</div>
<div>
<span style="color:#ff0000;"><strong> <input type="month"/></strong></span>
</div>
<div>
<br/>
<h2>15. week </h2> week <input/> ， 。 ， ； 。 。
<br/>
<br/>
<span style="color:#ff0000;"><strong> week <input/> :<br/> <input type="week"/></strong></span>
</div>
<div>
<br/>
<h2> 16. number </h2> number <input/> ， 。 min、 max、 step 。
</div>
<div>
<br/>
</div>
<div>
<strong><span style="color:#ff0000;"> number <input/> ：<br/> <input min="10" max="100" step="5"/></span></strong>
</div>
<div>
<br/>
<h2>17. range </h2> range <input/> ， min max ， ( 0 100)， step ， 。
</div>
<div>
<br/>
</div>
<div>
<span style="color:#ff0000;"><strong> range <input/> ：<br/> <input type="range" min="0" max="100" step="5"/> </strong></span>
</div>
<div>
<br/>
<h2>18. search </h2> search <input/> 。search text 。
</div>
<div>
</div>
<div>
<strong><span style="color:#ff0000;"> css ， ：</span></strong>
</div>
<div>
<strong><span style="color:#ff0000;"> input [type="search"] { -webkit-appearance:textfield;}</span></strong>
<br/>
<br/>
<h2> 19. tel </h2> tel <input/> 。 ， ， ， 12-89564752 pattern 。
</div>
<div>
<br/>
<h2> 20. color </h2> color <input/> ， 。 ， Black Berry 。
<br/>
<br/>
</div>
<p><br/></p>
</div>
</div>
</div>
</div>