HTML5 フォーム編

2012.02.06crossnodeHTML5


HTML5ではフォーム関係の仕様が色々と追加されました。特にinputタグのtype属性には多くの追加がありました。今回はinputタグのtype属性と新たに登場した属性を10項目ピックアップしてみました。
現状ではこれらの仕様に対応していないブラウザも多いですし、きちんと入力チェックするにはJSやPHP等で実装する必要があるかと思います。
※各項で掲示している参考画像は全てMac Chrome(Ver.16.0.912.75)での表示状態です。

01 : メールアドレス

<input type="email">

フォーム送信時に入力内容がメールアドレスの形式かブラウザ側でチェックしてくれます。形式に合っていなければ送信されず下の画像のようにメッセージが表示されます。
Chromeでは「1文字以上の英数 + @ + 1文字以上の英数」のパターンで通るようです。

02 : URL

<input type="url">

フォーム送信時に入力内容がURLの形式かブラウザ側でチェックしてくれます。形式に合っていなければ送信されず下の画像のようにメッセージが表示されます。
Chromeでは「http:// + 1文字以上の英数」のパターンで通るようです。

03 : 数値

<input type="number">

入力内容が数値の形式かブラウザ側でチェックしてくれます。数値以外が入力された場合はフォーカスが外れた瞬間に空欄に戻ります。画像にあるように入力欄に表示される上下ボタンで数字を増減させることもできます。
Chromeではマイナスも含めて整数が送信可能でした。

04 : inputその他

inputタグのtype属性には他にも下記のようなものも用意されています。

・検索(type=”search”)
・電話(type=”telephone”)
・日付(type=”date”)
・日時(type=”datetime”)
・ローカル日時(type=”datetime-local”)
・月(type=”month”)
・週(type=”week”)
・時間(type=”time”)
・レンジ(type=”range”)
・色(type=”color”)

05 : 入力必須

<input type="text" required>

「required」と指定するとフォーム送信時に入力欄が空欄かブラウザ側でチェックしてくれます。空欄の場合は送信されず下の画像のようにメッセージが表示されます。上記の新たなtypeやファイルアップロードなど様々なものに使えます。

06 : プレースホルダー

<input type="text" placeholder="入力してください">

「placeholder=”〜”」で入力欄に文字が表示されていてフォーカスするとそれが消えるというあれが実装できます。

07 : オートフォーカス

<input type="text" autofocus>

「autofocus」と指定するとページ読み込み時に自動的にフォーカスします。検索サイト等ではおなじみの機能ですがこれもJSいらずで動きます。
複数の入力欄に「autofocus」が設定されている場合は記述順が最後のものにだけフォーカスされます。

08 : 最小値・最大値

<input type="number" min="1" max="10">

「min=”〜”」で最小値、「max=”〜”」で最大値を設定できます。片方だけでも設定できます。

09 : ステップ値

<input type="number" step="0.5">

「step=”〜”」で数値入力のステップ値を設定できます。上記は0.5刻みのときの設定です。

10 : 正規表現

<input type="text" pattern="^[0-9A-Za-z]+$">

「pattern=”〜”」で入力を許可するパターンを正規表現で指定できます。上記は半角英数の設定です。

参考サイト

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


ページトップへ