HTML5入門

HTMLソースコード

<form action="sample-fieldset.php" method="post" target="_blank" id="sampleForm">
	<fieldset name="sampleFieldsetA">
		<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 name="sampleFieldsetB">
		<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 name="sampleFieldsetC">
		<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>

実際の表示