SYNCER

SYNCER

＜fieldset要素＞ - フォームコントロールのグループ化

公開日:

fieldset要素は、フォームコントロールをグループ化するための要素です。サーバーサイドに送信される内容に影響はありません。項目を整理することでユーザーが分かりやすくなるでしょう。また、グループ内にまとめてスタイルや属性を適用できるのも利点です。

概要

名前
fieldset (Field set)
カテゴリー
Flow content
Sectioning content
Palpable content
Form-associated element
Listed element
配置できる場所
Flow contentが期待される場所。
コンテンツモデル
任意でlegend要素。それに続くFlow content。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLFieldSetElement
デフォルトのスタイル
fieldset {
	display: block;
	-webkit-margin-start: 2px;
	-webkit-margin-end: 2px;
	-webkit-padding-before: 0.35em;
	-webkit-padding-start: 0.75em;
	-webkit-padding-end: 0.75em;
	-webkit-padding-after: 0.625em;
	min-width: -webkit-min-content;
	border-width: 2px;
	border-style: groove;
	border-color: threedface;
	border-image: initial;
}
仕様書
https://html.spec.whatwg.org/multipage/forms.html#the-fieldset-element

属性

disabled

この属性を付けると、操作が無効になる。グループに属する全てのフォームコントロールに影響がある。論理属性。

form

関連付けたいform要素のidを指定する。グループに属する全てのフォームコントロールに影響がある。

name

グループの名前。JavaScriptでDOMを操作する時などに利用する。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

fieldset要素は、フォームコントロールをグループ化する要素です。ユーザーに入力してもらうアンケートなどで、項目を分類しておくと把握しやすくなって親切です。また、このグループにdisabled属性やform属性を指定すると、グループの全フォームコントロールにまとめて適用されます。

HTML

<form action="./form.php">
	<p>名前: <input type="text" name="name"></p>

	<!-- 1つ目のグループ -->
	<fieldset>
		<p>年齢: <input type="number" name="age"></p>
		<p>身長: <input type="number" name="height"></p>
		<p>1日の運動時間: <input type="number" name="sport"></p>
	</fieldset>

	<!-- 2つ目のグループ -->
	<fieldset>
		<p>趣味: <input type="text" name="hobby"></p>
		<p>質問など: <textarea name="extra"></textarea></p>
	</fieldset>

	<button>内容を送信</button>
</form>

デモを開く

legend要素で、グループのキャプションを指定できます。この要素を配置する場合は、先頭に配置しなければいけません。

HTML

<form action="./form.php">
	<p>名前: <input type="text" name="name"></p>

	<!-- 1つ目のグループ -->
	<fieldset>
		<!-- 1つ目のグループのキャプション -->
		<legend>健康に関わる質問</legend>

		<p>年齢: <input type="number" name="age"></p>
		<p>身長: <input type="number" name="height"></p>
		<p>1日の運動時間: <input type="number" name="sport"></p>
	</fieldset>

	<!-- 2つ目のグループ -->
	<fieldset>
		<!-- 2つ目のグループのキャプション -->
		<legend>どうでもいい質問</legend>

		<p>趣味: <input type="text" name="hobby"></p>
		<p>質問など: <textarea name="extra"></textarea></p>
	</fieldset>

	<button>内容を送信</button>
</form>

デモを開く

fieldset要素に指定したdisabled属性やform属性は、グループ全体に適用されます。まとめて管理するのに便利です。

HTML

<form action="./form.php">
	<p>名前: <input type="text" name="name"></p>

	<!-- 1つ目のグループ -->
	<fieldset>
		<!-- 1つ目のグループのキャプション -->
		<legend>健康に関わる質問</legend>

		<p>年齢: <input type="number" name="age"></p>
		<p>身長: <input type="number" name="height"></p>
		<p>1日の運動時間: <input type="number" name="sport"></p>
	</fieldset>

	<!-- 2つ目のグループ -->
	<fieldset disabled>
		<!-- 2つ目のグループのキャプション -->
		<legend>どうでもいい質問</legend>

		<p>趣味: <input type="text" name="hobby"></p>
		<p>質問など: <textarea name="extra"></textarea></p>
	</fieldset>

	<button>内容を送信</button>
</form>

デモを開く

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜fieldset要素＞ - フォームコントロールのグループ化</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/fieldset/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>fieldset要素は、フォームコントロールをグループ化するための要素です。まとめてdisabled属性やform属性を指定したり、スタイルシートを適用するのに便利です。legend要素でグループのキャプションを設定できます。</p>

<h2>legend要素なし</h2>
<form action="./form.php">
	<p>名前: <input name="name" value="あらゆ"></p>
	<fieldset>
		<p>
			Twitterアカウント:
			<label><input type="radio" name="twitter" value="have" checked>持ってる</label>
			<label><input type="radio" name="twitter" value="not_have">持ってない</label>
		</p>
		<p>
			Facebookアカウント:
			<label><input type="radio" name="facebook" value="have" checked>持ってる</label>
			<label><input type="radio" name="facebook" value="not_have">持ってない</label>
		</p>
		<p>
			はてなアカウント:
			<label><input type="radio" name="hatena" value="have" checked>持ってる</label>
			<label><input type="radio" name="hatena" value="not_have">持ってない</label>
		</p>
	</fieldset>

	<button>内容を送信</button>
</form>

<h2>legend要素あり</h2>
<form action="./form.php">
	<p>名前: <input name="name" value="あらゆ"></p>
	<fieldset>
		<legend>SNSアカウントについて</legend>
		<p>
			Twitterアカウント:
			<label><input type="radio" name="twitter" value="have" checked>持ってる</label>
			<label><input type="radio" name="twitter" value="not_have">持ってない</label>
		</p>
		<p>
			Facebookアカウント:
			<label><input type="radio" name="facebook" value="have" checked>持ってる</label>
			<label><input type="radio" name="facebook" value="not_have">持ってない</label>
		</p>
		<p>
			はてなアカウント:
			<label><input type="radio" name="hatena" value="have" checked>持ってる</label>
			<label><input type="radio" name="hatena" value="not_have">持ってない</label>
		</p>
	</fieldset>

	<button>内容を送信</button>
</form>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>