fieldset
フォーム要素のグループ化

2008/3/26

構文

説明

fieldset要素は、ログイン情報、個人情報など、フォーム要素を入力する情報によって、フォーム要素をグループ化するブロック要素です。 グループにタイトルを付ける場合は、legend要素を使用します。

属性

固有の属性はありません。

サンプル

<style type="text/css">
	form#member fieldset {
		margin:1em 0; padding:0 10px 10px 10px;
		border:1px solid #ccc;
	}
	form#member legend {
		margin:0; padding:0 5px;
		font-weight:bold;
	}
</style>
<form action="#" id="member">
   <fieldset>
        <legend>ログイン情報</legend>
    	<p><label for="login_id">ユーザー名：</label><input type="text" name="login_id" id="login_id" /></p>
    	<p><label for="login_pw">パスワード：</label><input type="password" name="login_pw" id="login_pw" /></p>
    </fieldset>
	<fieldset>
		<legend>個人情報</legend>
			<p>
				<label for="name">氏名：</label>
				<input id="name" />
			</p>
			<p>
				<label for="postcode">郵便番号：</label>
				<input id="postcode" />
			</p>
			<p>
				<label for="address">住所：</label>
				<input id="address" />
			</p>
			<p>
				<label for="email">E-mail：</label>
				<input id="email" />
			</p>
			<fieldset>
				<legend>メルマガを購読しますか？</legend>
				<p>
					<label><input type="radio" name="melmaga" />はい</label>
					<label><input type="radio" name="melmaga" />いいえ</label>
				</p>
			</fieldset>
    </fieldset>
</form>