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

HTML5ではフォーム関連のユーザーインターフェースが新たに追加されたことで注目されていることから、以前の記事でinput要素に追加された新たなtype属性をご紹介しました。今回はさらにHTML5からinput要素に追加されたその他の新属性を紹介していきたいと思います。

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

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

また、type属性に関しては下記の記事を参照ください。
【HTML5 フォーム】formタグのinput要素に新たに追加された13のtype属性をまとめました!

autofocus属性

autofocus

autofocus属性を指定することで、ページロード後にフォーカスが自動で当たります。ユーザーがマウスクリックなどでフォーカスを当てる必要がなくページが表示されたらすぐに入力することができるメリットがあります。尚、autofocus属性は論理属性です。

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

autocomplete属性

autocomplete=”on”

autocomplete属性をonに指定することで、ユーザーが以前入力したデータをブラウザが自動補完し過去の入力データ候補を提示してくれるようになります。尚、機能を実装しているブラウザではデフォルト値は”on”になっています。

利用できるtype属性:

  • 『 text, search, url, tel, email, password, datetime, date, month, week, time, datetime-local, number, range, color 』

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

list属性

list=”datalist属性のid名”

list属性を使うことで、事前にセットしておいた値をリスト形式でユーザーに表示することができるようになります。リストの値はdatalist属性でマークアップします。datalist属性にid属性をセットし、そのid名をlist属性で指定することで値のリストを関連付けすることができます。

利用できるtype属性:

  • 『 text, search, url, tel, email, datetime, date, month, week, time, datetime-local, number, range, color 』

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

required属性

required

required属性を指定された項目は、フォームからサブミットする時に値がない場合はエラーメッセージが表示されるようになります。フォームで必須項目を指定する場合に重宝しそうですね。textarea要素に使用することも可能です。尚、required属性は論理属性です。

利用できるtype属性:

  • 『 text, search, url, tel, email, password, datetime, date, month, week, time, datetime-local, number, checkbox, radio, file 』

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

pattern属性

pattern=”正規表現”

pattern属性では正規表現を使い入力値のフォーマットを指定することができます。pattern属性で指定する正規表現は完全一致のみになりますので、部分一致での指定をすることができません。また、自動で『^』と『$』がパターンの最初と最後に加わるようです。

利用できるtype属性:

  • 『 text, search, url, tel, email, password, datetime, date, month, week, time, datetime-local, number, checkbox, radio, file 』

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

step属性

step=”ステップ値”

step属性はdatetimeタイプやnumberタイプのような日付・数字の値の精度を指定します。尚、step属性で指定する単位のことをステップと呼び、基準となる値をステップベースと呼びます。

タイプ ステップ単位 デフォルトのステップ
datetime 60
date 1
month 1
week 1
time 60
datetime-local 60
number 1 1
range 1 1

利用できるtype属性:

  • 『 datetime, date, month, week, time, datetime-local, number, range 』

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

placeholder属性

placeholder=”ヒントテキスト”

placeholder属性にはユーザーがそのテキスト・フィールドに何を入力したらよいか分かるようなヒントを記述します。記述した内容はフィールド内に表示されます。placeholder属性にセットするテキストに改行を入れることはできないので注意が必要です。尚、textarea要素に使用することも可能です。

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

form属性

form=”form要素のid名”

form属性はform要素のid名を指定することでform要素に関連付けされ、form要素の外にマークアップした場合でもサブミットする時に情報を一緒に送信することが可能になります。また、サブミットのボタンを外に置くこともできます。

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

以上で今回ご紹介する新属性については終わりになります。新しいtype属性に続きフォーム関連はOperaが一番対応しているようです。すべてのブラウザで対応するにはまだまだ時間がかかると思いますので当分はJavaScriptなどを用いて対応していくと思いますが、いずれそれらの対応が必要なくなった時は作業もずいぶん楽になりますね。

それと、フォーム関連の新要素やCSS3のブラウザ毎の対応状況を載せてくれている有名なサイトがあるのでご紹介します。


HTML5 & CSS3 Support

フォーム関連は試しましたら随時記事にしようと思っていますが、もし使い方が間違っている箇所等ございましたら教えてください。どうぞよろしくお願いします

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

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

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

Amazonへ

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

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

Amazonへ

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

この記事を書いた人

著者 : ハヤシユタカ

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

最近書いた記事

この記事に関連する記事