HTML

HyperText Markup Language fieldset element.

fieldset 要素

　fieldset要素は、フォームの入力項目をグループ化するために使います。グループ化を行うことにより、グループの間を tabキーで簡単に移動することが可能になります。

　この要素の最初に legend要素を入れ、そのグループ化されたフォームにタイトルを付けることができます。

<form action="example.cgi" method="post">
	<fieldset>
		<legend>お住まい</legend>
		<p><label>郵便番号：<input type="text" name="zip" /></label></p>
		<p>
			<label>都道府県：
				<select name="pref">
					<option value="13">東京都</option>
				</select>
			</label>
		</p>
	</fieldset>
	<fieldset>
		<legend>連絡先</legend>
		<p><label>電話番号：<input type="tel" name="tel" /></label></p>
		<p><label>Eメール：<input type="email" name="mail" /></label></p>
	</fieldset>
</form>

fieldset 要素の概要

カテゴリー

フロー・コンテンツ

セクショニング・ルート

コンテンツ･モデル

オプションで最初に 1つの legend要素を入れます。その後にフロー・コンテンツが続きます。

利用可能な場所

フロー・コンテンツが期待される場所

タグの省略

不可。開始と終了タグの両方が必要。

要素固有の属性

disabled

この要素の中にあるフォーム・コントロールをすべて無効にします。

form

この要素を関連付けるフォームの form 要素の id 属性をセットします。

name

この要素が表すフォーム・コントロールのグループの名前を指定します。

標準的なスタイル

fieldset {
	margin-left: 2px;
	margin-right: 2px;
	border: groove 2px ThreeDFace;
	padding: 0.35em 0.625em 0.75em;
}

disabled 属性

　disabled属性は論理属性で、このコンテンツ属性を指定すると、fieldset要素の中にあるフォーム・コントロールをすべて無効にします。

<form action="example.cgi" method="post">
	<fieldset>
		<legend>お住まい</legend>
		<p><label>郵便番号：<input type="text" name="zip" /></label></p>
		<p>
			<label>都道府県：
				<select name="pref">
					<option value="13">東京都</option>
				</select>
			</label>
		</p>
	</fieldset>
	<fieldset disabled="disabled">
		<legend>連絡先</legend>
		<p><label>電話番号：<input type="tel" name="tel" /></label></p>
		<p><label>Eメール：<input type="email" name="mail" /></label></p>
	</fieldset>
</form>

form 属性

　form属性は、fieldset要素が表すフォーム・コントロールのグループを、指定の form要素と結び付けるために使います。この属性には、結び付けたい form要素の id属性の値を指定します。

　この属性は、HTML5で新たに導入されました。本来、フォーム・コントロールは、form要素の中に入れて使うものでしたが、この属性が規定されたことにより、その制約がなくなりました。

<fieldset form="frm">
	<legend>連絡先</legend>
	<p><label>電話番号：<input type="tel" name="tel" /></label></p>
	<p><label>Eメール：<input type="email" name="mail" /></label></p>
</fieldset>
<form method="get" action="#" id="frm">
	<input type="submit" value="送信" />
</form>

　この例では、fieldset要素が form要素の外にマークアップされています。そして、fieldset要素に form属性がセットされています。この form属性には、form要素の id属性の値がセットされています。これによって、fieldset要素の中にあるフォーム・コントロールは、form要素に関連付けられ、送信ボタンを押した時には、fieldset要素の中にあるフォーム・コントロールの値も送信されます。

name 属性

　name 属性には、fieldset要素が表すフォーム・コントロールのグループの名前を指定します。このコンテンツ属性を指定する場合は、空文字列を指定してはいけません。