HTML5のフォーム機能

HTML5ではフォームに様々な拡張機能が付けられます。が、未だに使った事がなかったのでまとめてみました。

文字を予め表示しておく(placeholder)

名前欄に「名前を入力してください」といった文字や入力例を予め表示しておく事ができる機能です。以前(かなり前)自分はjQueryなどを用いて実現していましたが、placeholder属性を付与するだけで簡単に実現ができるようになっていました。

例とソース

上記の例のように入力すべき内容を表示しておく事で省スペースになります。また、入力例を表示する事で誤入力を防止できる効果も大きいようです。

入力すべき内容を指定する(type/pattern)

HTML5ではtype属性でURLやメールアドレスなど種類の指定を行う事で正しく入力されているか判断してくれます。間違った値が入力されていればsubmitした時にブラウザ側が警告を出してくれます。

また、pattern属性によって正規表現も使用する事ができます。指定した正規表現にマッチしなければtype属性による指定同様にブラウザ側が警告を出してくれます。

例とソース

例外な入力は送信先でも弾く事は必須になるとは思いますが、送信する前に警告してくれるのは大きな利点ですね。

アクセス時に自動的にカーソルを入力待ち状態にする（autofocus）

使ってる分には気づきにくいですが、autofocus属性をつけた入力部はページにアクセスした際に自動的にカーソルが当たります。主にアクセスして即時使う部分、検索部に使われます。Googleにアクセスするとわかりやすいと思います。

ソース

<input type="text" placeholder="カーソルがくる予定" autofocus>

このブログ内だと上手く機能しなかったので表示例は省略しました。

他にもHTML5で追加されたフォーム機能は多いですが、よく使いそうな機能を紹介してみました。各ブラウザがどう対応しているかは以下のURLが参考になると思います。

• HTML5のさまざまなform要素があなたのブラウザでどのように見えるかのまとめ -Native form elements