HTML の新しい入力タイプ
HTMLの新しい入力タイプ
HTML5では、テキストボックスのタイプを豊かにするために、以下のtype屬性値がinput要素に追加されます。
?color: 色を指定するために使用されるコントロール。
?日付: 日付（時(shí)間を除く年、月、日）を入力するためのコントロール。
?datetime: UTC タイムゾーンに基づく日付と時(shí)刻の入力制御 (時(shí)、分、秒、および秒の小數(shù)部)。
?datetime-local: タイムゾーンを除く、日付と時(shí)刻のコントロールを入力するために使用されます。
?電子メール: 電子メールを編集するためのフィールド。
?月: タイムゾーンなしで年と月を入力するために使用されるコントロール。
?number: 浮動(dòng)小數(shù)點(diǎn)數(shù)を入力するためのコントロール。
?range: 不正確な値制御を入力するために使用されます。
?search: 検索文字列を入力するための 1 行のテキスト フィールド。入力された値から改行は自動(dòng)的に削除されます。
?tel: 電話番號(hào)を入力するためのコントロール。
?時(shí)間: タイムゾーンなしで時(shí)間制御を開始するために使用されます。
?url: URL を編集するためのフィールド。 。
?week: 週-年で構(gòu)成される日付を入力するために使用されます。日付にはタイムゾーンは含まれません。 Miaomiaoxue という教育 Web サイトにアクセスしてこれらの知識(shí)を確認(rèn)し、しっかりとした基礎(chǔ)を築くことをお?jiǎng)幛幛筏蓼埂?
注: すべての主要なブラウザが新しい入力タイプをサポートしているわけではありませんが、すべての主要なブラウザですでに使用できます。サポートされていない場合でも、通常のテキストフィールドとして表示できます。入力タイプ: カラー : 數(shù)値
數(shù)値タイプは、數(shù)値を含む必要がある入力フィールドに使用されます。 受け入れられる數(shù)値に制限を設(shè)定することもできます:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>顏色選擇測試</title> </head> <body> <form action="demo-form.php"> 選擇你喜歡的顏色: <input type="color" name="favcolor"><br> <input type="submit"> </form> </body> </html>
入力タイプ: range
range タイプは、特定の範(fàn)囲內(nèi)の數(shù)値を含む必要がある入力フィールドに使用されます。 範(fàn)囲タイプはスライダーとして表示されます。 入力タイプ: search 、 tel 、 url 検索タイプは、サイト検索や Google 検索などの検索ドメインに使用されます。 tel 電話番號(hào)入力フィールドを定義します。 url タイプは、URL アドレスを含む必要がある入力フィールドに使用されます。 フォームを送信すると、URL フィールドの値が自動(dòng)的に検証されます。 <!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<body>
HTML代碼：
選擇日期：<input type="date" value="2011-01-04" /><br/><br/>
選擇時(shí)間：<input type="time" value="22:52" /><br/><br/>
選擇星期：<input type="week"/><br/><br/>
選擇月份：<input type="month"/><br/><br/>
</body>
</html>
