【HTML5 フォーム】formタグのinput要素に新たに追加された13のtype属性をまとめました!

ウェブ・ページのフォームではテキスト入力フィールドやチェックボックスなどのユーザーインターフェースを使用しますが、HTML5ではユーザーインターフェースがさらに追加されたことで注目されています。

特にinput要素ではさまざまなtype属性が追加されました。今回は新たに追加されたtype属性をソースをみながら表示を確認していきたいと思います。

HTML5でinput要素に追加されたtype属性

下記に各属性ごとの特徴をピックアップし、現状で対応しているブラウザの画面キャプチャを掲載しました。だだし、現状(※2011年9月)の対応状況になります。

search

『type=”search”』の主な特徴

  • 1行テキストの入力フィールドで表示され検索向けであることを表します。
  • input要素のtextタイプと機能は変りません。
  • value属性に改行を含むことはできません。もし含まれている場合は、ブラウザーはその改行を取り除きます。
  • 対応しているブラウザによってsearchタイプはtextタイプと見た目を区別するため角丸で表示します。

利用できるコンテンツ属性:

  • 『 autocomplete, list, maxlength, pattern, placeholder, readonly, required, size, autofocus, disabled, form, name, type, value 』

実際にブラウザでチェックしていただけるようにファイルをアップしました。
searchタイプを確認する

tel

『type=”tel”』の主な特徴

  • 1行テキストの入力フィールドで表示され電話番号向けであることを表します。
  • input要素のtextタイプと機能は変りません。
  • 入力値に制限を設けることはできません。
  • value属性に改行を含むことはできません。もし含まれている場合は、ブラウザーはその改行を取り除きます。
  • iPhoneなどのiOS版のSafariでは、入力時に入力パッドが数字入力モードになります。

利用できるコンテンツ属性:

  • 『 autocomplete, list, maxlength, pattern, placeholder, readonly, reququired, size, autofocus, disabled, form, name, type, value 』

実際にブラウザでチェックしていただけるようにファイルをアップしました。
telタイプを確認する

url

『type=”url”』の主な特徴

  • 1行テキストの入力フィールドで表示されURL向けであることを表します。
  • 入力できる値は絶対パスのURLのみです。
  • value属性に改行を含むことはできません。もし含まれている場合は、ブラウザーはその改行を取り除きます。
  • 不適切なURLを入れてサブミットした場合はエラーが表示されます。

利用できるコンテンツ属性:

  • 『 autocomplete, list, maxlength, pattern, placeholder, readonly, reququired, size, autofocus, disabled, form, name, type, value 』

実際にブラウザでチェックしていただけるようにファイルをアップしました。
urlタイプを確認する

email

『type=”email”』の主な特徴

  • 1行テキストの入力フィールドで表示されメールアドレス向けであることを表します。
  • value属性に改行を含むことはできません。もし含まれている場合は、ブラウザーはその改行を取り除きます。
  • 不適切なメールアドレスを入れてサブミットした場合はエラーが表示されます。

利用できるコンテンツ属性:

  • 『 autocomplete, maxlength, multiple, pattern, placeholder, readonly, reququired, size, autofocus, disabled, form, name, type, value 』

実際にブラウザでチェックしていただけるようにファイルをアップしました。
emailタイプを確認する

range

『type=”range”』の主な特徴

  • 数値をセットすることができるスライダーが表示されます。
  • デフォルトの値の範囲は『0~100』ですが、『min・max』属性を使用することでセット可能な数値の範囲を変更することができます。
  • デフォルトでは1刻みですが『step』属性を使用することで小数値を扱うことができます。(※デフォルト値は1です。)

利用できるコンテンツ属性:

  • 『 autocomplete, list, max, min, step, autofocus, disabled, form, name, type, value 』

実際にブラウザでチェックしていただけるようにファイルをアップしました。
rangeタイプを確認する

color

『type=”color”』の主な特徴

  • 色をセットすることができます。
  • 色は16 進数表記になります。 (例:#ff0033)
  • 未指定の状態にすることができない仕様のため、もし指定が無い場合は『#000000』が指定されます。

利用できるコンテンツ属性:

  • 『 autocomplete, list, autofocus, disabled, form, name, type, value 』

実際にブラウザでチェックしていただけるようにファイルをアップしました。
colorタイプを確認する

datetime

『type=”datetime”』の主な特徴

  • 日付と時間をセットすることができます。
  • タイムゾーンをUTCと定めているため、日本時間と比べて9時間前の日時になります。
  • value値はYYYY-MM-DDThh:mm:ssZ 形式です。 (例:2011-09-15T15:30:00Z)
  • 『min・max』属性を使用することでセット可能な日時の範囲を指定することができます。
  • 『step』属性を使用することで最小単位を指定することができます。(※デフォルト値は60秒です。)

利用できるコンテンツ属性:

  • 『 autocomplete, list, max, min, readonly, reququired, step, autofocus, disabled, form, name, type, value 』

実際にブラウザでチェックしていただけるようにファイルをアップしました。
datetimeタイプを確認する

date

『type=”date”』の主な特徴

  • 日付をセットすることができます。
  • デフォルトの基準日は1970年1月1日です。
  • value値はYYYY-MM-DD形式です。 (例:2011-09-15)
  • 『min・max』属性を使用することでセット可能な日付の範囲を指定することができます。
  • 『step』属性を使用することで最小単位を指定することができます。(※デフォルト値は1日です。)

利用できるコンテンツ属性:

  • 『 autocomplete, list, max, min, readonly, reququired, step, autofocus, disabled, form, name, type, value 』

実際にブラウザでチェックしていただけるようにファイルをアップしました。
dateタイプを確認する

month

『type=”month”』の主な特徴

  • 年月をセットすることができます。
  • デフォルトの基準日は1970年1月です。
  • value値はYYYY-MM形式です。 (例:2011-09-)
  • 『min・max』属性を使用することでセット可能な年月の範囲を指定することができます。
  • 『step』属性を使用することで最小単位を指定することができます。(※デフォルト値は1日です。)

利用できるコンテンツ属性:

  • 『 autocomplete, list, max, min, readonly, reququired, step, autofocus, disabled, form, name, type, value 』

実際にブラウザでチェックしていただけるようにファイルをアップしました。
monthタイプを確認する

week

『type=”week”』の主な特徴

  • 年とその年の何週目かをセットすることができます。
  • value値はYYYY-Www形式です。 (例:2011-W09 ←西暦2011年の9番目の週を表します。)
  • 『min・max』属性を使用することでセット可能な週の範囲を指定することができます。
  • 『step』属性を使用することで最小単位を指定することができます。(※デフォルト値は1週間です。)

利用できるコンテンツ属性:

  • 『 autocomplete, list, max, min, readonly, reququired, step, autofocus, disabled, form, name, type, value 』

実際にブラウザでチェックしていただけるようにファイルをアップしました。
weekタイプを確認する

time

『type=”time”』の主な特徴

  • 時間をセットすることができます。
  • value値はhh:mm:ss形式です。 (例:15:30:00)
  • 『min・max』属性を使用することでセット可能な時間の範囲を指定することができます。
  • 『step』属性を使用することで最小単位を指定することができます。(※デフォルト値は1分です。)

利用できるコンテンツ属性:

  • 『 autocomplete, list, max, min, readonly, reququired, step, autofocus, disabled, form, name, type, value 』

実際にブラウザでチェックしていただけるようにファイルをアップしました。
timeタイプを確認する

datetime-local

『type=”datetime-local”』の主な特徴

  • 日付と時間をセットすることができます。
  • datetimeタイプと異なりタイムゾーンを持ちません。
  • value値はYYYY-MM-DDThh:mm:ssZ 形式です。 (例:2011-09-15T15:30:00Z)
  • 『min・max』属性を使用することでセット可能な日時の範囲を指定することができます。
  • 『step』属性を使用することで最小単位を指定することができます。(※デフォルト値は60秒です。)

利用できるコンテンツ属性:

  • 『 autocomplete, list, max, min, readonly, reququired, step, autofocus, disabled, form, name, type, value 』

実際にブラウザでチェックしていただけるようにファイルをアップしました。
datetime-localタイプを確認する

number

『type=”number”』の主な特徴

  • 数値をセットすることができます。
  • 『min・max』属性を使用することでセット可能な数値の範囲を指定することができます。
  • デフォルトでは1刻みですが『step』属性を使用することで小数値を扱うことができます。(※デフォルト値は1です。)

利用できるコンテンツ属性:

  • 『 autocomplete, list, max, min, readonly, reququired, step, autofocus, disabled, form, name, type, value 』

実際にブラウザでチェックしていただけるようにファイルをアップしました。
numberタイプを確認する

ここまでinput要素のtype属性にHTML5から追加された各タイプを勉強しつつ紹介してきましたが、現状(※2011年9月)ではOpera以外のブラウザはほとんど対応していないようです。非常に残念でしたが、今後各ブラウザも徐々に対応してくるのでこれからも勉強していこうと思います。

尚、今回type属性を取り上げましたが、その他にも多くの属性が追加されましたので近いうちにまとめたいと思います。また、フォームのイベント関連も合わせて勉強していきたいと考えているので、こちらもまとめたらご紹介しますね。

上記であげた特徴以外に、もし絶対にはずしてはいけない特徴などありましたら教えて下さい。よろしくお願いします。

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

Amazonへ

徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

Amazonへ

ブログを作成する際に参考にした本はこちらにまとめてあります。

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事