HTML5 input types
HTMLマニュアルHTML5は、フォームの入力フィールドにさまざまな新しいinput typeを追加しています。
これらの新しいタイプは、入力データのバリデーションやフォームの機能を向上させることができます。
type=”email”
メールアドレスの入力フィールドを作成するために使用されます。ブラウザは自動的にメールアドレスのバリデーションを行います。
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">type=”url”
URLの入力フィールドを作成するために使用されます。ブラウザは自動的にURLのバリデーションを行います。
<label for="url">ウェブサイト:</label>
<input type="url" id="url" name="url">type=”number”
数値の入力フィールドを作成するために使用されます。ブラウザは自動的に数値のバリデーションを行い、minおよびmax属性を使用して範囲を指定することができます。
<label for="age">年齢:</label>
<input type="number" id="age" name="age" min="0" max="120">type=”range”
スライダーコントロールを作成するために使用され、ユーザーが範囲内の値を選択できます。minおよびmax属性を使用して範囲を指定することができます。
<label for="volume">音量:</label>
<input type="range" id="volume" name="volume" min="0" max="100">type=”date”
日付の入力フィールドを作成するために使用されます。ブラウザは自動的に日付のバリデーションを行い、カレンダーウィジェットを提供することがあります。
<label for="birthdate">生年月日:</label>
<input type="date" id="birthdate" name="birthdate">type=”color”
ラーピッカーを作成するために使用されます。ユーザーはこのコントロールを使って色を選択できます。
<label for="favcolor">君が好きな色:</label>
<input type="color" id="favcolor" name="favcolor">type=”time”
時間の入力フィールドを作成するために使用されます。ブラウザは自動的に時間のバリデーションを行い、時間選択ウィジェットを提供することがあります。
<label for="appointmentTime">予約時間:</label>
<input type="time" id="appointmentTime" name="appointmentTime">type=”datetime-local”
日付と時刻の入力フィールドを作成するために使用されます。ブラウザは自動的に日付と時刻のバリデーションを行い、カレンダーおよび時間選択ウィジェットを提供することがあります。
<label for="eventDateTime">日時:</label>
<input type="datetime-local" id="eventDateTime" name="eventDateTime">type=”month”
月と年の入力フィールドを作成するために使用されます。ブラウザは自動的に月と年のバリデーションを行い、カレンダーウィジェットを提供することがあります。
<label for="expiryDate">有効期限:</label>
<input type="month" id="expiryDate" name="expiryDate">type=”week”
週番号と年（つまり、第 1 週から第 ○○週）の入力フィールドを作成するために使用されます。ブラウザは自動的に週番号と年のバリデーションを行い、カレンダーウィジェットを提供することがあります。
<label for="weekNumber">週番号:</label>
<input type="week" id="weekNumber" name="weekNumber">type=”tel”
電話番号の入力フィールドを作成するために使用されます。ただし、ブラウザによっては電話番号のバリデーションが自動的に行われない場合があります。
<label for="phoneNumber">電話番号:</label>
<input type="tel" id="phoneNumber" name="phoneNumber">type=”search”
検索用テキストの入力フィールドを作成するために使用されます。ブラウザによっては、検索ボックスに適したスタイルが適用されます。
<label for="searchQuery">検索:</label>
<input type="search" id="searchQuery" name="searchQuery">
コメント