HTML の新しい入力タイプ
HTMLの新しい入力タイプ
HTML5では、テキストボックスのタイプを豊かにするために、以下のtype属性値がinput要素に追加されます。
color: 色を指定するために使用されるコントロール。
日付: 日付(時間を除く年、月、日)を入力するためのコントロール。
datetime: UTC タイムゾーンに基づく日付と時刻の入力制御 (時、分、秒、および秒の小数部)。
datetime-local: タイムゾーンを除く、日付と時刻のコントロールを入力するために使用されます。
電子メール: 電子メールを編集するためのフィールド。
月: タイムゾーンなしで年と月を入力するために使用されるコントロール。
number: 浮動小数点数を入力するためのコントロール。
range: 不正確な値制御を入力するために使用されます。
search: 検索文字列を入力するための 1 行のテキスト フィールド。入力された値から改行は自動的に削除されます。
tel: 電話番号を入力するためのコントロール。
時間: タイムゾーンなしで時間制御を開始するために使用されます。
url: URL を編集するためのフィールド。 。
week: 週-年で構成される日付を入力するために使用されます。日付にはタイムゾーンは含まれません。 Miaomiaoxue という教育 Web サイトにアクセスしてこれらの知識を確認し、しっかりとした基礎を築くことをお勧めします。
注: すべての主要なブラウザが新しい入力タイプをサポートしているわけではありませんが、すべての主要なブラウザですでに使用できます。サポートされていない場合でも、通常のテキストフィールドとして表示できます。入力タイプ: カラー : 数値
数値タイプは、数値を含む必要がある入力フィールドに使用されます。 受け入れられる数値に制限を設定することもできます:
<!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 タイプは、特定の範囲内の数値を含む必要がある入力フィールドに使用されます。 範囲タイプはスライダーとして表示されます。 入力タイプ: search 、 tel 、 url 検索タイプは、サイト検索や Google 検索などの検索ドメインに使用されます。 tel 電話番号入力フィールドを定義します。 url タイプは、URL アドレスを含む必要がある入力フィールドに使用されます。 フォームを送信すると、URL フィールドの値が自動的に検証されます。 <!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<body>
HTML代码:
选择日期:<input type="date" value="2011-01-04" /><br/><br/>
选择时间:<input type="time" value="22:52" /><br/><br/>
选择星期:<input type="week"/><br/><br/>
选择月份:<input type="month"/><br/><br/>
</body>
</html>