トップページ >  HTML5 >  type属性の拡張
初版2011/06/30: 最終更新日2011/06/30
type属性の拡張
目次
type属性の拡張
入力タイプ「search」
入力タイプ「tel」
入力タイプ「url」
入力タイプ「email」
入力タイプ「datetime」
入力タイプ「date」
入力タイプ「month」
入力タイプ「week」
入力タイプ「time」
入力タイプ「datetime-local」
入力タイプ「number」
入力タイプ「range」
入力タイプ「color」
type属性の拡張

HTML5によって、入力関係で最も大きく拡張されているのが「type」属性です。
HTML5以前のtype属性は以下のものでした。

text
1行入力のテキストボックスです。
基本的な入力ボックスとして使用されます。
password
パスワード入力のテキストボックスです。
入力値は伏せ字で表示されます。
checkbox
チェックボックスです。
radio
ラジオボタンです。
file
サーバーへファイルを送信する際に、送信するファイルを選択します。。
hidden
隠しデータをサーバーに送信する際に使用します。
画面には表示されません。
submit
送信ボタンです。
reset
リセットボタンです。
button
汎用ボタンです。
<button>要素と同様です。
image
画像のボタンです。
<button>要素と<img>の組み合わせと同様です。

HTML5では、これに下記の入力タイプが追加されました。
なお、各入力タイプは、ブラウザにより対応していないものがございます。
また、携帯(フューチャーフォン)で対応するものはありません。
対応していない入力タイプは、上記の「text」として扱われます。

入力タイプ「search」

検索テキスト入力欄が作成されます。

ほとんどのブラウザでは、見た目は入力タイプ「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>

入力タイプ「search」の実装例

検索:

※2011年6月現在、FireFox(4~)、Opera(10~)、Safari(5~)、Chrome(10~)で動作確認

入力タイプ「tel」

電話番号欄が作成されます。

ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
※今後、見た目や動作がブラウザによって異なる可能性があります

リスト2. 入力タイプ「tel」の記述例

<label for="tel">電話番号:</label>
<input type="tel" name="tel" />

入力タイプ「tel」の実装例

※2011年6月現在、FireFox(4~)、Opera(10~)、Safari(5~)、Chrome(10~)で動作確認

入力タイプ「url」

URLの入力欄が作成されます。

ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
但し、正しいURLかどうかの妥当性チェックがされます。
※今後、見た目や動作がブラウザによって異なる可能性があります

リスト3. 入力タイプ「url」の記述例

<label for="url">ホームページ:</label>
<input type="url" name="url" />

入力タイプ「url」の実装例

※2011年6月現在、FireFox(4~)、Opera(10~)、Safari(5~)、Chrome(10~)で動作確認

入力タイプ「email」

メールアドレスの入力欄が作成されます。

ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
但し、正しいメールアドレスかどうかの妥当性チェックがされます。
※今後、見た目や動作がブラウザによって異なる可能性があります

リスト4. 入力タイプ「email」の記述例

<label for="email">メールアドレス:</label>
<input type="email" name="email" />

入力タイプ「email」の実装例

※2011年6月現在、FireFox(4~)、Opera(10~)、Safari(5~)、Chrome(10~)で動作確認

入力タイプ「datetime」

世界標準時(UTC)で日時の入力欄が作成されます。

ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
ブラウザによっては、日付(カレンダー)や時間の特殊な入力欄となるものもあります。

リスト5. 入力タイプ「datetime」の記述例

<label for="datetime">日時:</label>
<input type="datetime" name="datetime" />

入力タイプ「datetime」の実装例

※2011年6月現在、Opera(10~)、Chrome(10~)で動作確認

入力タイプ「date」

日付の入力欄が作成されます。

ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
ブラウザによっては、日付(カレンダー)となるものもあります。

リスト6. 入力タイプ「date」の記述例

<label for="date">記念日:</label>
<input type="date" name="date" />

入力タイプ「date」の実装例

※2011年6月現在、Opera(10~)、Chrome(10~)で動作確認

入力タイプ「month」

月の入力欄が作成されます。

ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
ブラウザによっては、日付(カレンダー)となるものもあります。

リスト7. 入力タイプ「month」の記述例

<label for="month">適用月:</label>
<input type="month" name="month" />

入力タイプ「month」の実装例

※2011年6月現在、Opera(10~)、Chrome(10~)で動作確認

入力タイプ「week」

週の入力欄が作成されます。

ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
ブラウザによっては、日付(カレンダー)となるものもあります。

リスト8. 入力タイプ「week」の記述例

<label for="week">適用週:</label>
<input type="week" name="week" />の週

入力タイプ「week」の実装例

の週

※2011年6月現在、Opera(10~)、Chrome(10~)で動作確認

入力タイプ「time」

時刻の入力欄が作成されます。

ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
ブラウザによっては、時刻入力となるものもあります。

リスト9. 入力タイプ「time」の記述例

<label for="time">時間:</label>
<input type="time" name="time" />

入力タイプ「time」の実装例

※2011年6月現在、Opera(10~)、Chrome(10~)で動作確認

入力タイプ「datetime-local」

ローカル日時の入力欄が作成されます。

ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
ブラウザによっては、日付(カレンダー)や時間の特殊な入力欄となるものもあります。

リスト10. 入力タイプ「datetime-local」の記述例

<label for="datetime_local">日時:</label>
<input type="datetime-local" name="datetime_local" />

入力タイプ「datetime-local」の実装例

※2011年6月現在、Opera(10~)、Chrome(10~)で動作確認

入力タイプ「number」

数値の入力欄が作成されます。

ほとんどのブラウザでは、見た目は入力タイプ「text」と変わりません。
基本的には入力タイプ「text」と変わりません。
ブラウザによっては、右寄せの数値入力やスピンボタンがつくものもあります。

リスト11. 入力タイプ「number」の記述例

<label for="number">数値:</label>
<input type="number" name="number" />

入力タイプ「number」の実装例

※2011年6月現在、Opera(10~)、Chrome(10~)で動作確認

入力タイプ「range」

スライダー入力が作成されます。

一定範囲内の数値を入力するための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<

入力タイプ「range」の実装例

※2011年6月現在、Opera(10~)、Safari(5~)、Chrome(10~)で動作確認

入力タイプ「color」

色入力が作成されます。

色選択入力するためのinput要素です。 対応していないブラウザでは、見た目は入力タイプ「text」と変わりません。
ブラウザによっては、カラーピッカーになるものがあります。
音声ボリュームなどに適します。

リスト13. 入力タイプ「color」の記述例

<label for="color">色指定:</label>
<input type="color" name="color" />

入力タイプ「color」の実装例

※2011年6月現在、Opera(10~)で動作確認