HTML <fieldset>タグの使い方：フォームの入力項目をグループ化する要素

取り扱い	標準仕様
カテゴリー	フロー・コンテンツパルパブル・コンテンツ
親にできる要素	フロー・コンテンツを受け入れる要素
子にできる要素	`<legend>`と、それに続くフロー・コンテンツ
対応ブラウザ	caniuseで確認

<fieldset>タグの解説

<fieldset>は、フォームの入力項目をグループ化する際に使用します。グループ化した項目は見出しを設定したり、Tabキーでグループ間を移動できるようになります。

グループ化した項目の見出しは、<fieldset>の直後に<legend>を設置し、その中に記述します。

<fieldset>タグの特徴

レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
視覚的な効果として、グループ化した項目が枠で囲われます（ブラウザによる）。
同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<fieldset>要素に指定できる属性

disabled: 一時的にグループの子要素に配置されたコントロール可能な要素を無効にします。これが適用された場合、ブラウザは該当する要素を灰色で表示し、クリックなどのイベントを拒否します。
form: <form>のid属性に与えられた値を指定して関連付けます。<fieldset>がその子要素に属していなくとも、<form>の一部として扱う祭に使用します。
name: グループの名称を表します。APIで参照する固有の名前を指定できます。
グローバル属性: 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ: 全てのHTML要素に指定できるコンテンツ属性です。

<fieldset>要素の使い方とサンプルコード

この要素の最も基本的な書き方は以下の通りです。一般的には複数の入力項目をグループ化し、<legend>で見出しをつける手順を取ります。それらをCSSで装飾して利用者が使いやすいフォームを提供しましょう。


<fieldset>
	<legend>Caption</legend>
	<input type="text" value="text">
</fieldset>

disabled属性でグループを無効にする

<fieldset>にdisabled属性を指定すると、子要素に含まれる全ての入力項目を一括でユーザーが操作できない状態にします。この属性が指定された範囲は、フォーカスやクリックのイベントが発生せずに、フォームの送信の対象にもなりません。


<fieldset disabled>
	<legend>disabled</legend>
	<input type="text" value="text">
	<input type="password" value="password">
</fieldset>

複数のグループに分けて入力項目を整理する

フォームの入力項目が多くなってきたら、扱う情報ごとにグループを分けて整理しましょう。グループに見出しをつけてCSSで装飾を行えば、利用者が直感的に操作できるインターフェイスを提供できます。


<form action="#####" method="post" class="sample-block">
	<fieldset>
		<legend>利用者様情報</legend>
		<p>
			<span>お名前：</span>
			<label><input type="text" name="name" size="30"></label>
		</p>
		<p>
			<span>性別：</span>
			<label><input type="radio" name="gender" value="m">男</label>
			<label><input type="radio" name="gender" value="w">女</label>
		</p>
		<p>
			<span>端末：</span>
			<label><input type="checkbox" name="device" value="pc">PC</label>
			<label><input type="checkbox" name="device" value="sp">SP</label>
			<label><input type="checkbox" name="device" value="tb">Tab</label>
		</p>
	</fieldset>
	<fieldset>
		<legend>アンケート</legend>
		<p>
			<span>採点：</span>
			<label>
				<select name="point">
					<option value="5" label="非常に良い">
					<option value="4" label="良い">
					<option value="3" label="普通">
					<option value="2" label="良くない">
					<option value="1" label="非常に良くない">
				</select>
			</label>
		</p>
		<p>
			<span>感想：</span>
			<label>
				<textarea name="comment" rows="4" cols="40">感想があれば書いて下さい。</textarea>
			</label>
		</p>
	</fieldset>
	<button type="button">送信</button>
</form>


.sample-block {
	padding-block-end: 1rem;
	border: 1px solid #999;
	background-color: #ccc;
}
.sample-block fieldset {
	padding: 0;
	margin: 0;
	border: none;
}
.sample-block legend {
	inline-size: 100%;
	padding: 0.5rem;
	background-color: #039;
	color: #fff;
}
.sample-block p {
	display: flex;
	align-item: center;
	gap: 0.5rem;
	padding: 0.5rem;
	margin: 0;
	background-color: #fff;
}
.sample-block p span {
	flex-basis: 5rem;
}
.sample-block button {
	display: block;
	inline-size: 80%;
	padding: 0.5rem;
	margin: 1rem auto 0;
}