フォーム機能の拡張－HTML5リファレンス

■フォーム機能の拡張

HTML5では、フォームに関する新しい属性や指定できる属性値が多数追加される予定です。
入力必須・妥当性チェック・入力補助など、
これまでJavaScriptで作成されることの多かった機能が、
HTMLタグの属性だけで実現できるようになりそうです。
いずれも使用頻度の高い機能だけに、各ブラウザのサポートが待ち遠しいところです。

■<input>タグのtype属性に追加される値

HTML5では、<input>タグのtype属性に指定できる値の種類が増えています。
それぞれの値を指定した場合、例えば、<input type=”email”>を指定すると、
この属性値をサポートしているFirefox4・Opera10・Google Chromeなどのブラウザでは、
送信ボタンを押したときに入力されている値がメールアドレスとして妥当かどうかチェックしてくれます。

また、Operaでは、<input type=”date”>などの日付型の値を指定するとカレンダー入力になったり、
<input type=”range”>でレンジ入力を指定すると、マウスで操作できるレンジバーが表示されるなど、
ユーザーの入力補助となるインターフェースも拡張されています。

HTML5から、<input>タグのtype属性に新しく追加される値には、以下のものなどがあります。

<input type=”email”> …… メールアドレス
<input type=”url”> …… URL
<input type=”search”> …… 検索テキスト
<input type=”tel”> …… 電話番号
<input type=”number”> …… 数値
<input type=”date”> …… 日付
<input type=”datetime”> …… UTC（協定世界時）による日時
<input type=”datetime-local”> …… UTC（協定世界時）によらないローカル日時
<input type=”month”> …… 月
<input type=”week”> …… 週
<input type=”time”> …… 時間
<input type=”range”> …… レンジ
<input type=”color”> …… 色

以下は、HTML5で<input>要素のtype属性に追加される値を並べたサンプルソースです。
Opera10などのブラウザで開くと、動作を確認することができます。

HTMLソース

<form action=”xxx.php” method=”post”><label>メール（type=”email”）:<input type=”email” name=”email”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>URL（type=”url”）:<input type=”url” name=”url”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>検索（type=”search”）:<input type=”search” name=”search”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>電話（type=”telephone”）:<input type=”tel” name=”tel”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>数値（type=”number”）:<input type=”number” name=”number”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>日付（type=”date”）:<input type=”date” name=”date”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>日時（type=”datetime”）:<input type=”datetime” name=”datetime”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>ローカル日時（type=”datetime-local”）:<input type=”datetime-local” name=”datetime-local”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>月（type=”month”）:<input type=”month” name=”month”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>週（type=”week”）:<input type=”week” name=”week”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>時間（type=”time”）:<input type=”time” name=”time”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>レンジ（type=”range”）:<input type=”range” name=”range”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>色（type=”color”）:<input type=”color” name=”color”></label><input type=”submit” value=”送信”></form>

↓↓↓

ブラウザ上の表示

■入力ルールを指定する様々な属性

HTML5では、<input>タグのtype属性以外にも、入力ルールを指定する様々な属性が追加されています。

autofocus属性 …… オートフォーカス

autofocus属性を指定すると、ウェブページが表示された際に、指定した入力欄にカーソルが当たって自動的にフォーカスされます。
すでに大手検索エンジンなどで利用されている機能ですが、現状では JavaScript で実現しているのが一般的です。

placeholder属性 …… プレースホルダー

placeholder属性で指定した値が、入力欄に初期値として表示されます。例えば、テキストフィールドに初期値として、
「検索するキーワードを入力してください」などのヒントを示してユーザーの操作を補助することができます。

autocomplete属性 …… オートコンプリート

autocomplete属性を指定すると、ユーザーに対して入力候補を提示して、内容を自動補完することができます。
例えば、検索キーワード候補の提示のようなインターフェースを実現できます。

入力候補として表示されるデータのリストを指定するには、HTML5から追加される予定の<datalist>タグを使用します。<input>タグのlist属性の値と<datalist>タグのid属性の値を同じにして、入力欄とデータリストを関連付けます。

required属性 …… 入力必須

required属性を指定すると、その入力項目が入力必須であることをブラウザに知らせることができます。

pattern属性 …… 正規表現による入力制限

pattern属性を指定すると、正規表現を使って入力値のパターンを指定することができます。
正規表現が使えることで、特定の文字列が含まれているかどうかや、半角英数・全角文字・ひがらなのみなど、入力制限を自由に設定できます。

以下のサンプルは、半角英数で入力されているかどうかのチェックです。

<input type=”text” name=”userid” pattern=”^[0-9A-Za-z]+$”> ※半角英数

multiple属性 …… 複数の値

multiple属性を指定すると、ユーザーが複数の値を一度に入力、あるいは、選択して送信することができます。値はカンマ区切りとなります。

min属性・max属性 …… 最小値と最大値

min属性とmax属性を指定すると、数値型や日付型の入力欄で入力できる値の最小値と最大値を指定することができます。

step属性 …… ステップ値

step属性を指定すると、数値型や日付型の入力欄で刻むステップ値を指定することができます。

accept属性（type=”file”のとき）

accept属性でファイル形式を指定すると、どのタイプのファイルがサーバ側で受け取ることができるかをブラウザに知らせることができます。
まだ、 accept属性をサポートしたブラウザは無いようですが、もしサポートされれば、
おそらくユーザーが選択できるファイル形式を制限できるようになると思われます。

入力ルール指定の一覧サンプル

以下は、HTML5で<input>要素に追加される入力ルールを指定する属性を並べたサンプルソースです。
Opera10などのブラウザで開くと、動作を確認することができます。（ブラウザでサポートされていない値もあります）

<p>
HTML5でinput要素に追加される入力ルールを指定する属性です。Opera10などのブラウザで動作を確認できます。（ブラウザでサポートされていない値もあります）
</p>

<form>
<fieldset>
オートフォーカス（autofocus属性）:<input type=”text” name=”subject” autofocus><br>
プレースホルダー（placeholder属性）:<input type=”search” name=”q” placeholder=”検索するキーワードを入力してください”><br>
オートコンプリート（autocomplete属性）:
<input type=”text” name=”yourarea” autocomplete=”on” list=”tokyo”>
<datalist id=”tokyo”>
<option value=”渋谷”>
<option value=”新宿”>
<option value=”池袋”>
</datalist><br>
入力必須（required属性）:<input type=”text” name=”yourname” required><br>
正規表現による入力制限（pattern属性）:<input type=”text” name=”userid” pattern=”^[0-9A-Za-z]+$”> ※半角英数<br>
複数の値（multiple属性）:
<input type=”text” name=”hobby” list=”hobbys” multiple>
<datalist id=”hobbys”>
<option value=”映画”>
<option value=”音楽”>
<option value=”絵画”>
<option value=”読書”>
</datalist><br>
最小値と最大値（min属性・max属性）:<input type=”number” name=”ninzu” min=”1″ max=”4″> <br>
ステップ値（step属性）:<input type=”number”name=”lot” step=”0.5″><br>
<input type=”submit” value=”送信”>
</fieldset>
</form>

サンプルを別画面で開く

■HTML5で作成したフォームのサンプル

以下は、HTML5で作成したフォームのサンプルソースです。
Opera10などのブラウザで開くと、動作を確認することができます。

<h1>HTML5 フォームサンプル</h1>
<form>
<fieldset>
お名前（必須）：<input type=”text” name=”yourname” autofocus required><br>
メールアドレス：<input type=”email” name=”mail”><br>
URL：<input type=”url” name=”website”><br>
ご利用プラン：
<input type=”text” list=”plan”>
<datalist id=”plan”>
<option value=”とくとくプラン”>
<option value=”らくらくプラン”>
<option value=”ぼちぼちプラン”>
<option value=”そこそこプラン”>
</datalist><br>
ご利用日：<input type=”date” name=”riyoubi”><br>
ご利用人数<input type=”number” name=”ninzu” min=”1″ max=”4″>人<br>
満足度（5段階）：
<input type=”range” name=”manzoku” min=”0″ max=”5″ value=”0″>
<output name=”result” onforminput=”value=manzoku.value”></output><br>
<input type=”submit” value=”送信”>
</fieldset>
</form>