disabled属性

fieldset要素のdisabled属性は、fieldset要素を無効にする属性。HTML5にて新たに導入された属性である。

ブラウザ対応

構文

<fieldset disabled></fieldset>

disabled属性は、論理属性である。

disabled属性が存在する場合、そのfieldset要素は無効になる。

サンプルコード

<fieldset disabled>
	<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>

サンプル

HTMLソースコード

<form action="sample-fieldset.php" method="post" target="_blank" id="sampleForm">
	<fieldset disabled>
		<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 disabled>
		<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 disabled>
		<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">送信</button>
	</p>
</form>

実際の表示

パーソナルデータ

年齢: 

出身地: 

好きなスポーツ(複数回答可)

好きな色(複数回答可)