form属性

fieldset要素のform属性は、fieldset要素が所属するform要素を指定する属性。

ブラウザ対応

構文

<fieldset form="所属するform要素のid属性値"></fieldset>

所属するform要素のid属性値

fieldset要素が所属するform要素のid属性値を指定する。

要点

  • form属性は、fieldset要素が所属するform要素を指定する属性である。
  • fieldset要素にform属性を指定しない場合は、直近の祖先要素であるform要素が所属フォームとなる。
  • form属性は、HTML5にて新たに導入された属性である。

サンプルコード

<fieldset form="sampleFormId">
	<legend>好きなスポーツ（複数回答可）</legend>
	<p>
		<label>
			<input type="checkbox" name="sampleSports[]" value="サッカー">
			サッカー
		</label>
		<label>
			<input type="checkbox" name="sampleSports[]" value="フットサル">
			フットサル
		</label>
		<label>
			<input type="checkbox" name="sampleSports[]" value="その他">
			その他
		</label>
	</p>
</fieldset>
<form id="sampleFormId"></form>

サンプル

HTMLソースコード

<style scoped>
	fieldset.sampleFieldset {
		margin: 1em 0;
	}
	fieldset.sampleFieldset label {
		margin-right: 1.5em;
	}
</style>
<fieldset form="sampleForm" class="sampleFieldset">
	<legend>パーソナルデータ</legend>
	<p>
		年齢：　
		<label>
			<input type="radio" name="sampleAge" value="10代" checked>
			10代
		</label>
		<label>
			<input type="radio" name="sampleAge" value="20代">
			20代
		</label>
		<label>
			<input type="radio" name="sampleAge" value="30代">
			30代
		</label>
		<label>
			<input type="radio" name="sampleAge" value="40代">
			40代
		</label>
		<label>
			<input type="radio" name="sampleAge" value="50代">
			50代
		</label>
		<label>
			<input type="radio" name="sampleAge" value="60代以上">
			60代以上
		</label>
	</p>
	<p>
		出身地：　
		<label>
			<input type="radio" name="sampleArea" value="関東地方" checked>
			関東地方
		</label>
		<label>
			<input type="radio" name="sampleArea" value="関西地方">
			関西地方
		</label>
		<label>
			<input type="radio" name="sampleArea" value="中部地方">
			中部地方
		</label>
		<label>
			<input type="radio" name="sampleArea" value="その他">
			その他
		</label>
	</p>
</fieldset>
<fieldset form="sampleForm" class="sampleFieldset">
	<legend>好きなスポーツ（複数回答可）</legend>
	<p>
		<label>
			<input type="checkbox" name="sampleSports[]" value="サッカー" checked>
			サッカー
		</label>
		<label>
			<input type="checkbox" name="sampleSports[]" value="フットサル" checked>
			フットサル
		</label>
		<label>
			<input type="checkbox" name="sampleSports[]" value="テニス">
			テニス
		</label>
		<label>
			<input type="checkbox" name="sampleSports[]" value="バスケットボール" checked>
			バスケットボール
		</label>
		<label>
			<input type="checkbox" name="sampleSports[]" value="野球">
			野球
		</label>
		<label>
			<input type="checkbox" name="sampleSports[]" value="卓球">
			卓球
		</label>
		<label>
			<input type="checkbox" name="sampleSports[]" value="その他">
			その他
		</label>
	</p>
</fieldset>
<fieldset form="sampleForm" class="sampleFieldset">
	<legend>好きな色（複数回答可）</legend>
	<p>
		<label>
			<input type="checkbox" name="sampleColors[]" value="赤">
			赤
		</label>
		<label>
			<input type="checkbox" name="sampleColors[]" value="青">
			青
		</label>
		<label>
			<input type="checkbox" name="sampleColors[]" value="緑">
			緑
		</label>
		<label>
			<input type="checkbox" name="sampleColors[]" value="黄">
			黄
		</label>
		<label>
			<input type="checkbox" name="sampleColors[]" value="白" checked>
			白
		</label>
		<label>
			<input type="checkbox" name="sampleColors[]" value="黒">
			黒
		</label>
		<label>
			<input type="checkbox" name="sampleColors[]" value="シルバー">
			シルバー
		</label>
		<label>
			<input type="checkbox" name="sampleColors[]" value="ゴールド" checked>
			ゴールド
		</label>
		<label>
			<input type="checkbox" name="sampleColors[]" value="その他">
			その他
		</label>
	</p>
</fieldset>
<p>
	<button type="submit" form="sampleForm">送信</button>
</p>
<form action="sample-fieldset.php" method="post" target="_blank" id="sampleForm"></form>

実際の表示

パーソナルデータ

年齢：　

出身地：　

好きなスポーツ（複数回答可）

好きな色（複数回答可）