<fieldset> フォームの入力項目をグループ化する

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

<fieldset>タグの説明

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

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

<fieldset>タグの特徴

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

<fieldset>に指定できる主な属性

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

<fieldset>の使い方とサンプル

このタグを使ったマークアップのサンプルです。

HTML
<form action="#####" method="post">
	<fieldset>
		<legend>利用者様情報</legend>
		お名前:
		<input type="text" name="name" size="30"><br>
		性別:
		<input type="radio" name="seibetsu" value="m">男
		<input type="radio" name="seibetsu" value="w">女<br>
		端末:
		<input type="checkbox" name="tanmatsu" value="pc">PC
		<input type="checkbox" name="tanmatsu" value="i">Docomo
		<input type="checkbox" name="tanmatsu" value="e">au
		<input type="checkbox" name="tanmatsu" value="s">SoftBank
	</fieldset>

	<fieldset>
		<legend>アンケート</legend>
		採点:
		<select name="point">
			<option value="1">非常に良い</option>
			<option value="2">良い</option>
			<option value="3">普通</option>
			<option value="4">良くない</option>
			<option value="5">非常に良くない</option>
		</select><br>
		感想:<br>
		<textarea name="kanso" rows="4" cols="40">
		感想があれば是非書いて下さい。</textarea>
	</fieldset>

	<input type="submit" value="送信">
	<input type="reset" value="リセット">
</form>
表示確認

<fieldset>に関連するHTMLタグ

入力・送信フォームに関連する要素
<form> フォームを作成する
<fieldset> フォームの入力項目をグループ化する
<legend> 入力項目のグループにキャプションを与える
<input> フォームを構成する部品を作成する
<label> 入力項目にキャプションを与えて関連付ける
<textarea> 複数行に渡るテキスト編集項目を作成する
<button> ボタンを設置する
<select> セレクトボックスを作成する
<option> セレクトボックスの選択肢を作成する
<optgroup> セレクトボックスの選択肢をグループ化する
<datalist> フォームの入力欄に入力候補となる選択肢を提供する