こんにちは、はやちです。
以前の記事初めてHTML5でコーディングする時のまとめでは、html5の新しい要素を紹介しましたが、今回はフォームのinput要素に追加された属性をご紹介します。これらを使えば、今まではJavascriptで実装していたような動きをHTMLだけで実現する事が出来ます。
※ 2012.07.11 Twitterでご指摘をいただき、タイトルの”８つの新要素”を”８つの新属性”に変更いたいました。また、内容の方も修正致しました。
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…１
- range…１
□動きをみる ※対応しないブラウザがある為、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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
