<label> 入力項目にキャプションを与えて関連付ける

<label>タグの説明

<label>は、ユーザーインターフェイスの入力項目にキャプションを与える祭に使用します。主に<form>の中に配置された<input>や<textarea>と一緒に使います。

このタグは、ラベリングする要素のid属性の値を参照する使い方と、このタグで囲って対象を明らかにする使い方の二種類の方法を持ちます。

<label>には、関連付けられた項目の入力作業を補助する機能があります。具体的には、自身の表示領域がクリックされると対象となる入力項目へフォーカスを移動させます。これはパソコンやスマートフォンの画面で細かい作業をするユーザーの手助けとなります。

<label>タグの特徴

• レイアウトの初期値はインラインです。文章の改行には影響を与えません。
• 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
• 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<label>に指定できる主な属性

for

フォームの部品に指定したid属性の値と関連付ける場合に使用します。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<label>の使い方とサンプル

ラベリングされた項目と、そうでない項目を比較します。ラベリングされていない項目のキャプションは、クリックしても何の効果もありませんが、ラベルで紐付けされたキャプションは、対象の項目にフォーカスを当てます。

<div>
	お名前
	<input type="text">
</div>

<div>
	<label for="s0001">お名前</label>
	<input type="text" id="s0001">
</div>

<label>には二種類の記述方法があります。一つは項目に与えられたid属性の値を参照するやり方。そしてもう一つは、ラベルのタグで入力項目を囲うやり方です。

<div>
	<label for="s0002">お名前</label>
	<input type="text" id="s0002">
</div>

<div>
	<label>お名前
		<input type="text">
	</label>
</div>

以下の例では、ラジオボタンの小さな丸にフォーカスしなくても、ラベルの文字列をクリックすることで、選択が完了することを確認できます。

<form action="#####" method="post">
	西暦<br>
	<input type="radio" name="seireki" value="2000" id="n00">
	<label for="n00">2000年</label><br>
	<input type="radio" name="seireki" value="2001" id="n01">
	<label for="n01">2001年</label><br>
	<input type="radio" name="seireki" value="2002" id="n02">
	<label for="n02">2002年</label><br>
	<input type="radio" name="seireki" value="2003" id="n03">
	<label for="n03">2003年</label><br>
	<input type="radio" name="seireki" value="2004" id="n04">
	<label for="n04">2004年</label><br>
	<input type="radio" name="seireki" value="2005" id="n05">
	<label for="n05">2005年</label><br>
	<input type="submit" value="決定">
</form>