HTML5で導入されたフォームコントロール

このページでは、HTML5のフォームに関するサンプルを紹介します。

HTML5で導入されたコントロール

HTML5では、inputタグにさまざまなタイプが追加され、入力用のユーザインタフェースが充実しました。
下表はその一覧(ただし、Opera 11で実装しているUI)です。

※2014年以降、HTML5の仕様変更により、input type=”datetime”など、一部のフォームコントロールが廃止になりました。いずれ復活するかもしれませんが、HTML5では使わない方がいいかと思います。

新コントロール一覧
マークアップ 説明 ユーザインターフェース
<input type=”search”/> 検索入力フィールド
<input type=”tel”/> 電話番号入力フィールド
<input type=”url”/> URL入力フィールド
<input type=”email”/> メールアドレス入力フィールド
<input type=”datetime”/> 日時入力フィールド。タイムゾーンはUTC固定で、最後にZが付きます。 廃止
<input type=”date”/> 日付入力フィールド 廃止
<input type=”month”/> 年月入力フィールド 廃止
<input type=”week”/> 週入力フィールド 廃止
<input type=”time”/> 時刻入力フィールド 廃止
<input type=”datetime-local”/> 日時入力フィールド。タイムゾーンはローカルです。 廃止
<input type=”number”/> 数値入力フィールド
<input type=”range”/> 範囲付き数値入力フィールド
<input type=”color”/> 色入力フィールド 廃止

入力値の制約

また、HTML5では、フォームのコントロールに入力制約を設けることができるようになりました。

入力に制約を設ける属性
属性 説明 利用可能なタイプ
max 最大値を指定します。
例:10以下の数値
<input type=”number” name=”n1″ max=”10″ />
例:2012-12以前の年月
<input type=”month” name=”m1″ max=”2010-12″ />
datetime, date, month, week, time, datetime-local,
number, range
min 最小値を指定します。
例:0以上の数値
<input type=”number” name=”n2″ min=”0″ />
例:2010-01以降の年月
<input type=”month” name=”m2″ min=”2010-01″ />
datetime, date, month, week, time, datetime-local,
number, range
pattern 入力を許すパターンを正規表現で指定します。
例:郵便番号
<input type=”text” name=”zip” pettern=”\d{3}\-\d{4}” />
例:電話番号を03始まりに限定
<input type=”tel” name=”tel” pettern=”03\-[\d\-]+” />
text, search, url, tel, email, password
required 入力または選択が必須であることを指定します。
例:
<input type=”password” name=”p1″ required=”required” />
text, search, url, tel, email, password, datetime,
date, month, week, time, datetime-local, number,
checkbox, radio, file
step 入力できる値の刻みを指定します。
例:0以上偶数のみ
<input type=”number” name=”e” min=”0″ step=”2″ />
例:2010-07-03から毎週土曜日のみ
<input type=”date” name=”d” min=”2010-07-03″ step=”7″ />
datetime, date, month, week, time, datetime-local,
number, range

バリデーション

HTML5では、フォーム・コントロールのほかに、バリデーション機能も追加されました。
上記の入力制約に違反した入力値をサブミットした場合、ブラウザ上にエラーメッセージを出せるようになりました。

例:郵便番号の入力チェック。999-9999形式以外の入力をして送信ボタンを押すと、吹き出し等でエラーメッセージが出ます。

郵便番号 :

title属性に書かれたメッセージがエラーメッセージの中身になります。
また、サブミット時だけでなく、コントロールにマウスポインタを乗せると、ツールチップでtitle属性の値が出力されるはずです。

バリデーションのタイミングは、サブミット時のみです。マークアップだけではそのタイミングをほかに制御できません。
さらに、エラーメッセージは上から1つしか表示されません。

多くのシーンでは、これらの動きは自由にカスタマイズしたいはずです。そのために、HTML5にはフォーム・バリデーションAPIがあります。

広告
  • LINEで送る