HTML5によって、入力関係で最も大きく拡張されているのが「type」属性です。
HTML5以前のtype属性は以下のものでした。
HTML5では、これに下記の入力タイプが追加されました。
なお、各入力タイプは、ブラウザにより対応していないものがございます。
また、携帯(フューチャーフォン)で対応するものはありません。
対応していない入力タイプは、上記の「text」として扱われます。
ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
※今後、見た目や動作がブラウザによって異なる可能性があります
リスト1. 入力タイプ「search」の記述例
<lable for="look">検索:</label> <input type="seach" name="look" list="keywords"> <datalist id="keywords"> <option value="HTML5">HTML5</option> <option value="CSS3">CSS3</option> </datalist>
ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
※今後、見た目や動作がブラウザによって異なる可能性があります
リスト2. 入力タイプ「tel」の記述例
<label for="tel">電話番号:</label> <input type="tel" name="tel" />
ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
但し、正しいURLかどうかの妥当性チェックがされます。
※今後、見た目や動作がブラウザによって異なる可能性があります
リスト3. 入力タイプ「url」の記述例
<label for="url">ホームページ:</label> <input type="url" name="url" />
ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
但し、正しいメールアドレスかどうかの妥当性チェックがされます。
※今後、見た目や動作がブラウザによって異なる可能性があります
リスト4. 入力タイプ「email」の記述例
<label for="email">メールアドレス:</label> <input type="email" name="email" />
ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
ブラウザによっては、日付(カレンダー)や時間の特殊な入力欄となるものもあります。
リスト5. 入力タイプ「datetime」の記述例
<label for="datetime">日時:</label> <input type="datetime" name="datetime" />
ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
ブラウザによっては、日付(カレンダー)となるものもあります。
リスト6. 入力タイプ「date」の記述例
<label for="date">記念日:</label> <input type="date" name="date" />
ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
ブラウザによっては、日付(カレンダー)となるものもあります。
リスト7. 入力タイプ「month」の記述例
<label for="month">適用月:</label> <input type="month" name="month" />月
ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
ブラウザによっては、日付(カレンダー)となるものもあります。
リスト8. 入力タイプ「week」の記述例
<label for="week">適用週:</label> <input type="week" name="week" />の週
ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
ブラウザによっては、時刻入力となるものもあります。
リスト9. 入力タイプ「time」の記述例
<label for="time">時間:</label> <input type="time" name="time" />
ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
ブラウザによっては、日付(カレンダー)や時間の特殊な入力欄となるものもあります。
リスト10. 入力タイプ「datetime-local」の記述例
<label for="datetime_local">日時:</label> <input type="datetime-local" name="datetime_local" />
ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
ブラウザによっては、右寄せの数値入力やスピンボタンがつくものもあります。
リスト11. 入力タイプ「number」の記述例
<label for="number">数値:</label> <input type="number" name="number" />
一定範囲内の数値を入力するためのinput要素です。
対応していないブラウザでは、見た目は入力タイプ「text」と変わりません。
ブラウザによっては、スライダーになるものがあります。
音声ボリュームなどに適します。
リスト12. 入力タイプ「range」の記述例
<label for="range">容量:</label> <input type="range" name="range" min="-10" max="10" step="1" /> <output value="range.value" for="range"></output<
色選択入力するためのinput要素です。
対応していないブラウザでは、見た目は入力タイプ「text」と変わりません。
ブラウザによっては、カラーピッカーになるものがあります。
音声ボリュームなどに適します。
リスト13. 入力タイプ「color」の記述例
<label for="color">色指定:</label> <input type="color" name="color" />