HTML5 のフォーム関連タグ

【関連記事】
HTML4/XHTML1 から HTML5 への変更点
HTML5 のセクション関連タグ
HTML5 のコンテンツグループ化関連タグ
HTML5 のテキストの意味付け関連タグ
HTML5 の埋め込みコンテンツ関連タグ

●参考
4.10 Forms - HTML5

追加されたフォーム関連要素

要素	カテゴリ	タグ内に含むもの	説明
datalist	flow content phrasing content	phrasing content または 0 個以上の option 要素	input 要素で使われる選択肢を定義する。
output	flow content phrasing content listed, labelable, and resettable form-associated element	phrasing content	計算結果を表す。 計算自体は、JavaScript などを使って処理する。

変更された属性 (グローバル属性を除く)

要素名	属性名	説明
form	novalidate	ブール属性。 指定すると、サブミットの際にフォームの正当性チェックが行われない。
fieldset	form	関連づけされる form 要素の ID を指定する。 デフォルトでは、すぐ上のレベルの form 要素に関連づけされる。
	disabled	指定すると、子ノードのフォーム・コントロールが無効状態になる (最初の legend 要素を除く)。
input	type	以下の値が追加された。 search text とほぼ同様。 プラットフォームによっては、検索フィールドが通常の入力欄と形状が異なる場合があるので、それに対応するためのもの。 tel 電話番号の入力欄。 url 絶対 URL の入力欄。 email メールアドレスの入力欄。 datetime 日時の入力欄 (UTC)。 date 日付の入力欄。 month 月の入力欄。 week 曜日の入力欄。 time 時刻の入力欄。 datetime-local 日時の入力欄 (現地時刻)。 number 数値の入力欄。 range 目盛りなど、一定の範囲から数値を取得するフォーム・コントロールを表示させる。 color カラーパレットなど、色を表す文字列を取得するフォーム・コントロールを表示させる。
	form	(既述)
	autofocus	ブール属性。 指定すると、ページの表示時にそのフォーム・コントロールにフォーカスが移る。
	autocomplete	以下のいずれかを指定する。 on キーワード・マッピングをオンにする。 off キーワード・マッピングをオフにする。 値無し デフォルト状態にする (関連づけられている form 要素の autocomplete の値。form 要素の autocomplete のデフォルト値は on)。 この属性を指定しない場合はデフォルト状態となる。
	list	あらかじめ定義しておいた選択肢一覧 datalist 要素の ID を指定する。
	required	ブール属性。 指定するとその要素は必須となり、サブミット時にチェックされる。
	multiple	ブール属性。 ユーザーが複数の値を指定できることを表す。
	pattern	フォーム・コントロールの value をチェックするための正規表現。
	min	最小値。 値が数値の場合、その値が最小値となる。 値が数値でない場合、type 属性の現在の状態からデフォルトの最小値が決定されれば、その値が最小値となる。 いずれでもない場合、最小値は無しとなる。 サブミットの際、ユーザーが入力した値が数値の場合、最小値より小さいかどうかチェックされる。
	max	最大値。 内容は min 属性と同様。
	step	取りうる数値の階差。 ベース値は、もし最小値が設定されていればその値。最小値が無い場合、デフォルトのベース値が設定されていればその値。それが無ければ 0。
	placeholder	ユーザーがデータ入力する際の補助となる短めのヒント。 入力する値のサンプルや、短い説明を記述しておく。 改行コードは使用できない。 label 属性とは異なる。
output ※新規	for	計算に使われたり、計算に影響を与えたりする要素を、明示的に示す。
	form	(既述)
	name	要素名。

例

W3C サイトに書かれていた例を引用。
(1) input 要素の pattern 属性の例

<label> Part number:

<input pattern="[0-9][A-Z]{3}" name="part"

title="A part number is a digit followed by three uppercase letters."/>

</label>

(2) datalist 要素の例

<input type="url" name="location" list="urls">

<datalist id="urls">

<option label="MIME: Format of Internet Message Bodies" value="http://www.ietf.org/rfc/rfc2045">

<option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/">

<option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint">

<option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/">

<option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html">

<option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/">

</datalist>

(3) output要素の例

<form onsubmit="return false">

<input name=a type=number step=any> +

<input name=b type=number step=any> =

<output onforminput="value = a.valueAsNumber + b.valueAsNumber"></output>

</form>