Search
  1. label〔ラベル〕

label
ラベル

2008/3/26

構文

<label> ~ </label>

説明

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

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

属性

label要素の属性
属性="値"説明サポート状況必須・任意代替
XHTML 1.0XHTML 1.1
一般属性-STFS任意style属性はCSSで代替。
for="%IDREF"ラベルと関連付ける入力要素のid名を指定。STFS任意 
accesskey="%Character"キーボードショートカットを指定。STFS任意 
onfocus="%Script"フォーカスが当たった時に実行する処理を指定。STFS任意 
onblur="%Script"フォーカスが外れた時に実行する処理を指定。STFS任意 

サンプル

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

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop