HTML5のフォームを実際に使ってみた。
HTML5では、制作者が実装するのに大変なフォーム処理を簡単にしてくれるしくみが備わっています。 では、実際にどのようなものになっているのか、サンプルコードを作ってみたので動かしてみたいと思います。
HTML5のFormのコード例
今回作成したHTML5のコードは以下の通り。
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>HTML5のフォームテスト</title>
</head>
<body>
<form action="" method=post>
<p><label><input type=email name=meru required>メールアドレス</label></p>
<p><label><input type=url name=homepage required>ホームページ</label></p>
<p><label><input type=number name=size max=27.5 min=20.0 value=23.5 step=0.5>靴のサイズ</label></p>
<p><label><input pattern="^[0-9]{3}-[0-9]{4}$" name=postnum>正規表現（郵便番号:○○○-○○○○）</label></p>
<p><label><input type=text name=subject multiple list=messagelist>お問い合わせ件名</label></p>
<datalist id="messagelist">
<option value="要望：">
<option value="不具合：">
<option value="ご予約：">
<option value="問い合わせ：">
</datalist>
<p><input type=submit></p>
</form>
</body>
</html>
Operaで見てみると…
HTML5の実装が進んでいるOpera10で見てみると、こんな感じ。
入力制限
type属性をemailにすると、フィールドの横にメールのアイコンが付きました。 また、type属性をurlにすると、WEBページっぽいアイコンが付きましたね。
もし、メールアドレスじゃない文字列や、URLじゃない文字列を入力して「送信」ボタンを押すと…
メールアドレス
<input type=email name=meru required>
URL
<input type=url name=homepage required>
こんな感じのエラーメッセージが標準で表示されます。 なんという親切設計…！ ちょっとエラーメッセージが切れてますけど(^-^;)
また、requiredを付加すると、そこは入力必須の項目となります。 もちろん、requiredは他のフォーム項目でも使うことができますよ。
正規表現
正規表現キター！！って感じで、これは便利な属性が加わりました。 以下は郵便番号をルールに組み込んでみたところ。
<input pattern="^[0-9]{3}-[0-9]{4}$" name=postnum>
この正規表現にマッチしない文字を入力すると怒られます。
入力ガイド
制限と並んでフォーム入力の重要な要素は「いかにして入力しやすくするか」です。 これについても、親切設計な属性が用意されています。
数字を設定しやすい「type=number」
type属性をnumberにすると、数字カウンターになります。 これにmin属性やmax属性、step属性を加えて、より厳密に入力してもらうことができます。
たとえば靴のサイズだと、0.5単位で20cm～27.5cmまでから選んでほしい場合、以下のようにできます。
<input type=number name=size max=27.5 min=20.0 value=23.5 step=0.5>
ステップボタンの上を押すと…
ちゃんと0.5単位で値が変化しました。
また、キーボードの矢印キーの「↑」や「↓」でも値を変化させることができますよ。
入力を補助してくれるmultiple&list
新しく加わったユニークなフォームの属性でmultipleとlistがあります。
これは、select要素と似ていますが、選んだものからさらに修正したりできる属性なので、どちらかというと、テキストフォームの入力補助という感じですね。
実例だと、例えばお問い合わせフォームの件名に運営側が判別しやすいラベルを付加してもらう、などの利用法が考えられます。
<input type=text name=subject multiple list=messagelist>お問い合わせ件名 <datalist id="messagelist"> <option value="要望："> <option value="不具合："> <option value="ご予約："> <option value="問い合わせ："> </datalist>
これで作成したテキストフィールドにカーソルをフォーカスさせると、以下のように候補のテキストがリストアップされて入力を自動化してくれます。
まとめ
いかがだったでしょうか？ いままでJavaScriptで書いていた面倒な処理がシンプルにできるようになったことがわかっていただけたかと思います。 早く多くのブラウザに搭載してもらいたい機能ですね。
参考書
HTML5関連の書籍では今のところ最良の書。
2010-01-23