フォームを劇的に使いやすくする!HTML5の8つの新属性

フォームを劇的に使いやすくする!HTML5の8つの新属性

はやち

はやち

こんにちは、はやちです。
以前の記事初めてHTML5でコーディングする時のまとめでは、html5の新しい要素を紹介しましたが、今回はフォームのinput要素に追加された属性をご紹介します。これらを使えば、今まではJavascriptで実装していたような動きをHTMLだけで実現する事が出来ます。

※ 2012.07.11 Twitterでご指摘をいただき、タイトルの”8つの新要素”を”8つの新属性”に変更いたいました。また、内容の方も修正致しました。

autofocus属性

この属性を指定してあげる事により、ページがロードされたタイミングで自動的にフォーカスがあたるようになります。例えば検索ボックスなどに指定してあげたり、メールフォームの一番上の要素にこれを指定してあげれば、ユーザビリティが上がると思います。

html

<form>
<label>お名前: <input type="text" name="name" class="text" autofocus/></label>
</form>

動きをみる

autocomplete属性

autocomplete属性をonにすることで、ユーザーが入力したデータが自動的に候補を提示してくれるようになります。
検索フォームに設定すると今までの検索の候補が出てくるようになるので便利です。

html

<form>
<label>お名前: <input type="text" name="name" autocomplete="on" /></label>
<input type="submit" value="送信" /></form>

動きをみる

list属性

list属性を使うことで、事前にセットしておいた値をリスト形式で表示することができるようになります。リストの値はdatalist属性でマークアップします。
事前にセットしてあげることによって入力する手間が省けますね。

html

<form>
<label>E-mail: <input type="email" name="email" list="lists" autocomplete="on" /></label>
<datalist id="lists">
<option value="lig@example.com"></option>
<option value="bbb@example.com"></option>
<option value="ccc@example.com"></option>
</datalist>
</form>

動きをみる ※対応しないブラウザがある為、firefox・Operaでご確認ください

required属性

required属性を指定された項目は、項目内に値がない場合にエラー表示されるようになります。
これはかなり便利!わざわざプログラムで記述しなくていいので凄く楽です。

html

<form>
<label>E-mail:<input type="email" name="email2" required /></label>
<input type="submit" value="送信" />
</form>

動きをみる

pattern属性

pattern属性でフォーマットを指定します。フォーマットで指定したパターンと一致しなかった場合はエラー表示がされます。
これで細かく名前の読みがなを平仮名に制限したり、メールアドレスに半角英数のみの制限や文字数を制限することができます。

html

<form>
<label>携帯番号: <input type="tel" name="tel" pattern="d{3}-d{4}-d{4}" /></label>
<input type="submit" value="送信" />
</form>

動きをみる

step属性

datetimeタイプやnumberタイプのような日付・数字の値を指定することができます。

html

<form>
<label>偶数番号: <input type="number" name="number" step="2" /></label>
<input type="submit" value="送信" />
</form>

タイプ名

  • datetime…秒
  • date…日
  • month…月
  • week…週
  • time…秒
  • datetime-local…秒
  • number…1
  • range…1

動きをみる ※対応しないブラウザがある為、Chrome・Operaでご確認ください

placeholder属性

テキスト・フィールドに何を入力したらよいか分かるようなヒントを記述することができます。
メールアドレスの記入例や注意書きなど、あらかじめフィールドに入っているとわかりやすいですね。ちなみにplaceholder属性にセットするテキストは改行を入れることはできません。

html

<form>
<label>E-mail:<input type="email" name="email" placeholder="lig@example.com" /></label>
</form>

textareaの場合

<form>
<textarea name="question" cols="50" rows="5" placeholder="ご質問内容をお書きください" />
</textarea>
</form>

動きをみる

form属性

form要素のid名を指定することでform要素の外にマークアップすることができます。
複数のフォーム項目を作る時に便利です。

html

<form id="sample-form" action="#" method="post">
<label>お名前: <input type="text" name="name" /></label>
</form>
<input type="submit" value="送信" form="sample-form" />

まとめ

Chromeではlist要素が効かず。
Firefoxではstep要素が効かず。
Safariではautofocus要素・placeholder要素以外は効きません
残念ながらIEは全部効きません(◞‸◟)

唯一operaだけは全部実装することができます。

ブラウザの事考えずにこの要素を使えたらどんなに楽になることやら_(:3」∠)_

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL