label
ラベル

2008/3/26

構文

説明

label要素は、入力要素のラベルを表すインライン要素です。
label要素を入れ子にすることはできません。

フォーム内の入力要素にそれぞれラベルを付けることで、ラベルをクリックすると、テキストボックスにフォーカスが当たったり、ラジオボタンにチェックを付けることができるようになるため、ユーザーが入力、選択しやすくなります。

属性

サンプル

<form id="userfrm" action="regist.php" method="get" onsubmit="return false;">
	<fieldset>
		<legend>ユーザ登録</legend>
		<p>
			<label for="username">ユーザー名：</label>
			<input type="text" id="uname" name="username" size="20" maxlength="30" />
		</p>
		<p>
			性別：
			<label for="s1"><input type="radio" id="s1" name="sex" value="1" />男</label>
			<label for="s2"><input type="radio" id="s2" name="sex" value="2" />女</label>
		</p>
		<p>
			趣味：
			<label for="cb1"><input type="checkbox" id="cb1" name="cb1" value="1" />映画</label>
			<label for="cb2"><input type="checkbox" id="cb2" name="cb2" value="1" />音楽</label>
			<label for="cb3"><input type="checkbox" id="cb3" name="cb3" value="1" />読書</label>
			<label for="cb4"><input type="checkbox" id="cb4" name="cb4" value="1" />スポーツ</label>
			<label for="cb5"><input type="checkbox" id="cb5" name="cb5" value="1" />その他</label>
		</p>
		<p>
			<label for="job">職業：</label>
			<select id="job" name="job">
			 <option value="" selected="selected">▼ひとつ選択してください</option>
			 <option value="government-employee">公務員</option>
			 <option value="manager">経営者・役員</option>
			 <option value="company-employee">会社員</option>
			 <option value="self-employed">自営業</option>
			 <option value="free-lance">自由業</option>
			 <option value="housewife">専業主婦</option>
			 <option value="part-time">パート・アルバイト</option>
			 <option value="student">学生</option>
			 <option value="other">その他</option>
			</select>
		</p>
		<p>
			<input type="submit" value="登録" />
		</p>
	</fieldset>
</form>