HTML の新しい入力タイプLOGIN

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 タイプは、特定の範囲内の数値を含む必要がある入力フィールドに使用されます。 範囲タイプはスライダーとして表示されます。

<!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>

入力タイプ: 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>
コースウェア