フォームタグの追加

HTML5では、新しい標(biāo)準(zhǔn)は、テキストボックスのプロンプト情報(bào)、フォーム検証、日付選択コントロール、色選択コントロール、範(fàn)囲コントロール、プログレスバー、ラベルクロスフォームおよびその他の機(jī)能を新しいタグに直接追加します。ラベルの中にあります。

1.數(shù)値型入力タグ

<input type="number" name="demoNumber" min="1" max="100" step="1"/>

name: フォーム送信時(shí)のキー値を識(shí)別します min: 現(xiàn)在の入力ボックスに入力された最小値を識(shí)別します max: 入力ボックスに入力された最大値を識(shí)別します現(xiàn)在の入力ボックスのステップ: 増加/減少をクリックすると、増加/減少のステップ サイズを識(shí)別します

2. メール タイプ入力タグ

<input type="email" name="email" placeholder="Please登録したメールアドレスを入力してください「/>

フォームを送信すると、このテキストボックスはメールアドレスの正規(guī)表現(xiàn)と一致するかどうかを自動(dòng)的にチェックします。

3. URL型入力タグ

<input type="url" placeholder="URLを入力してください" name="url"/>

4.電話型の入力タグ

<input type="tel" placeholder="電話番號(hào)の入力" name="phone"/>

5. 範(fàn)囲型の入力タグ

< ;input type="range" min="0" max="50" step="5" name="rangedemo" value="0"/>

このタイプのタグを追加すると、入力範(fàn)囲は非常にシンプルかつ簡(jiǎn)単で、非常に標(biāo)準(zhǔn)的なものとなり、ユーザーの入力エクスペリエンスは非常に優(yōu)れています。また、このタグはフォームに新たに追加された出力タグと併用することで連攜効果を得ることができます。

<form oninput="output.value=parseInt(range.value)"/>

<input type="range" min="0" max="100" step="5" name="range" value="0"/>

<output name="output">0<output/>

</form>

6. 新しい日付、時(shí)刻、月、週の入力タグ

Web プロジェクト開発では、関連する JS 日付コントロールが必ず登場(chǎng)します。HTML5 に新しく追加されたフォーム屬性により、Web 開発がより簡(jiǎn)潔になります。

<input type="date" name="datedemo"/>

関連する日付屬性には、月、時(shí)刻、週、日付時(shí)刻ローカル、日付時(shí)刻も含まれます

7. 色選択入力タグ。

<input type="color" name="colordemo"/>

8. 入力タグのオートコンプリート機(jī)能

一部のプロジェクトでは、自動(dòng)補(bǔ)完または入力プロンプトが必要です。 HTML5対応でさらにシンプルになります。

<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />

<datalist id="autoNames">

<option value="簡(jiǎn)単開始します " ></option>

データリスト>