この記事では、サンプル コードを使用して、HTML5 の新しいフォーム要素と属性を示します。デモ コードには、プレースホルダー属性、オートフォーカス属性、リスト要素とデータリスト要素、検索タイプのテキスト ボックス、電子メール タイプのテキスト ボックス、数値タイプのテキスト ボックス、範囲が含まれています。 type テキスト ボックス、tel タイプ テキスト ボックス、url タイプ テキスト ボックス、および日付、時刻タイプの入力要素など。
サンプルコードは次のとおりです:
プレースホルダー属性: <br> 一般にテキスト ボックスで使用されます <br> その主な機能は、テキストボックスが未入力状態で内容が空の場合、テキスト ボックスのプロンプト コンテンツ <br> 効果: <br> テキスト ボックスがフォーカスを取得すると、テキスト ボックスがフォーカスを失い内容がなくなると、プロンプト情報が自動的にクリアされます。 <br> が入力されると、プロンプト情報は再び自動的に消去されます。<br> onfocel および onblur イベントの助けを必要とする従来のテキスト ボックスが不要になります。<br> (ほとんどの PC ブラウザーおよびモバイル ブラウザーと互換性があるとしか言えません)。テクノロジーは確かに進歩しています) <br> 例: < ;input type="text" placeholder="私はプレースホルダーです。リマインダーとして使用されます"><br>
list 要素と datalist 要素: <br> list 要素の主な機能はテキスト ボックスの入力を促すことであり、プロンプトのデータ ソースは datalist によって提供されます <br> 現在、list と datalist要素は Opera ブラウザでのみサポートされており、この機能をサポートするモバイル ブラウザもありません <br> 例: <input type="text" placeholder="list 属性と datalist 要素を追加しましたが、理解できる人が多くありません" list = "mydatalist"＆gt; <br />＆lt; datalist id = "mydatalist"＆gt;<br />＆lt; option label = "1"＆gt; i are datalist1＆lt;/option＆gt; <br />＆lt; option label = "2" >私は datalist2</option><br> <option label="3"> 私は datalist3</option><br> <option label="4">私は datalist4</option><br> </datalist><br>
検索タイプのテキストボックス: <br> 主に使用されるテキストボックスキーワードを検索します<br> このテキスト ボックスと通常のテキスト ボックスの唯一の違いは、Safari と Chrome で閲覧されることです。ブラウザでは、テキスト ボックスの外観が丸くなります。<br> 例: <input type= "search" placeholder="検索タイプのテキスト ボックスです"><br>
電子メールの種類のテキスト ボックス: <br> は、電子メール アドレスを入力するための入力テキスト ボックスで通常使用されます。テキスト ボックス 通常のテキスト ボックスとほぼ同じに見えますが、Safari モバイル ブラウザでは実際には異なります <br> キーボードはテキスト ボックスの種類に応じて、対応するキーボードを表示します <br> 例: <input type = "email" placeholder="私は電子メール タイプのテキスト ボックスです"><br>
: <br> は数値の入力に使用されるテキスト ボックス タイプです <br> min、max、step 属性とともに使用できます <br> 例: <input type="number" value="0" min=" 0 " max="10" step="1"><br>
範囲タイプ テキスト ボックス:<br> スライド入力方式を提供する数値範囲入力テキスト ボックス タイプです <br> min、max、range およびその他の属性とともに使用する必要があります <br> 例: <input type="range" value=" 1 " min="0" max="100" step="1"><br>
電話番号の種類テキスト ボックス: <br> は、ユーザーが電話番号を入力するためのテキスト ボックスのタイプです <br> モバイル ブラウザでは、このテキスト ボックスのキーボードには、テキスト ボックスのタイプに応じて対応するキーボードが表示されます <br> 例: < input type="tel" placeholder="私は Tel タイプのテキスト ボックスです"><br>
