Webアプリケーションを作成する上で必ずお世話になるのが、テキストフィールドやボタンなどのフォーム要素である。HTML 5では、もともとWeb Forms2として策定が進められてきた仕様を取り込み、フォーム要素に対して大幅な機能強化が加えられている。

以下に、それらの強化点を順不同で挙げていく(あまりに細かいと思われる変更点は除く)。また、各ブラウザの現時点での対応状況も合わせて記載する。

placeholder

placeholderとは、未入力状態の入力フィールドに表示されるヒント情報のことだ。たとえばテキストフィールドであれば、未入力時は以下のように文字列が薄く表示される。

実現方法は簡単で、placeholder属性にヒント文字列を指定するだけだ。

<input type="text" placeholder="input me">

現時点で対応しているブラウザはSafari 4とChrome 3であった。

autofocus

画面が表示された際、この属性を付与した入力フィールドに自動的にフォーカスが当たる。これまではそうした処理を実現するにはJavaScriptを用いる必要があったが、HTML 5に対応したブラウザでは不要となる。 

<input type="text" autofocus>

この属性についても、対応しているのはSafari 4とChrome 3であった。

オートコンプリート機能の制御

入力補助のためのオートコンプリート機能は、テキスト入力の手間を省いてくれる便利な機能ではあるが、以前入力した値が誰にでも見られてしまうため、セキュリティ面でのリスクもある。いわば諸刃の剣とも言えるオートコンプリート機能であるが、autocomplete属性を用いるだけで簡単に制御することができる。 

<input type="text" name="greeting" autocomplete="on">

autocomplete属性には、"on" "off"、そして""(何も指定しない)という3つの値を指定することができる。何も指定しなかった場合は、ブラウザのデフォルト設定が用いられる。 また、オートコンプリート機能をonにした場合、補完候補として表示されるデータのリストを明示的に指定することも可能だ。そのためにはdatalistタグとlist属性を用いる。datalistタグは、複数のデータを保持しておくための汎用的な要素であり、複数のoptionタグを子要素にとる。対応していないブラウザが誤って表示してしまわないよう、CSSなどを用いて非表示にしたほうがよいだろう。 

<datalist id="greetings" style="display: none;">
  <option>Good Morning
  <option>Hello
  <option>Good Afternoon
</datalist>

上記のdatalistは、3つのデータを格納したリストを定義している。このdatalistのIDを、テキストフィールドのlist属性に与えれば、オートコンプリート時にデータリストの値が補完候補として表示される。 

<input type="text" name="greeting" autocomplete="on" list="greetings">

実行結果

datalistを用いた補完候補の指定に対応したブラウザは、Opera10のみであった。

input要素の種別が大幅に増加

input要素のtype属性に指定できる値が大幅に増加し、これまでJavaScriptフレームワークなどで実現されていたようなリッチなコントロールを簡単に利用できるようになった。
以下が、type属性に指定できる値の完全なリストである。

種別 説明 対応ブラウザ
hidden ユーザにとって不可視の隠しフィールド 全ブラウザ
text 1行テキスト入力フィールド 全ブラウザ
search textと同様(だが、ブラウザによっては見た目が代わったりなどの効果がある) Safari 4、Chrome 3(その他のブラウザは見た目に変化がない)
tel textと同様(だが、ブラウザによっては見た目が変わったりなどの効果がある) なし(全ブラウザで見た目に変化がない)
url textと同様だが、URLとして正しい形式の文字列を入力する必要がある Opera10
email textと同様だが、メールアドレスとして正しい形式の文字列を入力する必要がある Opera10
password パスワード入力フィールド 全ブラウザ
datetime, date, month, week, time, datetime-local 日時を入力するフィールド。valueAsDate()メソッドを用いて、入力値をDate型として取得することも可能(datetime-localを除く)。Operaの実装では、フォーカスが当たるとカレンダーが表示され、選択入力することができた。 Opera10
number 数値を入力するフィールド。見た目は普通のテキストフィールドと変わらないが、数値以外を入力することができない Opera10
range 一定範囲内の数値を入力するためのフィールド。minとmaxという属性を持ち、最小値と最大値を設定することができる(省略時は0と100)。Operaによる実装では、スライダーによる値指定を行うようになっている Opera10
color 色選択フィールド。選択された値は"#000000"という形式の文字列で取得することができる。現在実装しているブラウザはないが、カラーピッカーがポップアップされるような実装になるのは間違いないだろう なし
checkbox チェックボックス 全ブラウザ
radio ラジオボタン 全ブラウザ
file HTML 4との最大の違いは、"multiple"属性を指定することにより、複数のファイルを一度に選択できるようになった事。value属性はファイル名をカンマで区切った文字列となる。また、accept属性にMIMEタイプを指定することにより、選択できるファイルの種類を限定できるようにもなった 全ブラウザ(multiple属性を実装しているのはOpera 10、Safari 4、Chrome 3。accept属性を実装しているブラウザはなし)
submit, image 送信ボタン。HTML4 との最大の違いは、formmethod/formaction/formenctypeといった属性を用いて、formの属性をオーバーライドできるようになったこと 全ブラウザ(form系の属性を実装しているブラウザはなし)
reset リセットボタン 全ブラウザ
button ボタン 全ブラウザ

現時点で、これらの入力フィールドを最も数多く実装しているのはOpera10.00beta1だ。以下のスクリーンショットを見れば、フィールドタイプに応じてどのようなUIになるかが一目瞭然だ。

各種フォーム部品をOpera 10で表示した結果

日時系フィールドで表示されるカレンダー(図はtype="week"時のもの)

入力値のバリデーション

入力フィールド値の妥当性を簡単にチェックするための仕組みが追加された。

まず、HTML5から追加された、入力制限指定の仕組みから説明しよう。

  • required属性を指定すると、その入力フィールドが入力必須であることをブラウザに伝えることができる
  • pattern属性を指定すると、入力値のパターンを正規表現で指定することができる
  • 数値型や日付型のフィールドにはmin/maxと言った属性があり、最小値と最大値を指定することができる
  • 数値型や日付型のフィールドにはstepと言った属性があり、指定した数値で刻まれた値に合致するよう強制できる

上記の方法を用いて制約を施しておけば、フォーム送信時に自動的に入力値チェックが実行される。以下のサンプルを実行すると、半角英数字が入力されているかどうかのチェックが自動的に行われ、チェックに失敗するとエラーメッセージが表示される。 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form method="post">
    <input name="text" type="text" required pattern="^\w.*$">
    <input type="submit" value="送信">
</form>
</body>
</html>

実行結果

また、form要素やfieldset要素が持つ「checkValidity()」メソッドを呼べば、明示的にチェックを行うことも可能だ。checkValidity()は、チェックの結果をboolean型で返す。

var form = document.forms[0];
if (form.checkValidity()) {
  // チェックが通ったときの処理
}

output要素の追加

新たなフォーム要素として、outputが追加される。outputを大まかに表すなら、「可視状態のhidden」と言っていいだろう。ユーザに表示される値でありながら、フォーム送信時にはvalue属性の値がリクエストパラメータに含まれる(パラメータ名はname属性で指定する)。

原稿執筆時点でoutputタグを実装しているブラウザは存在しない。