cman.jpWEBページ作成
広告
<label> 「入力部品とラベルの関連付け」[読み方：ラベル]
<label>タグは、入力部品とラベル（タイトル）の関連付けを指定する場合に使用します。
<input type="checkbox">や<input type="radio">に<label>を指定すると、ラベル（タイトル）をクリックすることが可能となります。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<label> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ パルバブルコンテンツ | フレージングコンテンツを子要素にもてる場所 | フレージングコンテンツ <label>は不可 ラベルの対象になってないラベル付け可能な要素は不可 | 不可 |
<label>の属性
【構文】
<label>～入力部品、ラベル～</label>
<label for="id">～ラベル～</label>
<label for="id">～ラベル～</label>
| 属性 | 意味 | 値のサンプルなど |
|---|---|---|
| for="id名" | 関連付けする入力部品のid名 | for="id01" |
| form="form id" | 関連付けたい<form>タグのID ※FORM内に定義する場合は不要 ※HTML5以降に廃止。指定不可。 | - |
| 廃止された属性 |
|
|
| グローバル属性 |
| |
| イベント属性 |
| |
<label>のサンプル
<div>
<label>氏名：<input type="text" name="in01" size="30"></label>
</div>
<div>
性別：
<label><input type="radio" name="in02" value="1">男性</label>
<label><input type="radio" name="in02" value="2">女性</label>
<label><input type="radio" name="in02" value="3">法人</label>
</div>
<label>氏名：<input type="text" name="in01" size="30"></label>
</div>
<div>
性別：
<label><input type="radio" name="in02" value="1">男性</label>
<label><input type="radio" name="in02" value="2">女性</label>
<label><input type="radio" name="in02" value="3">法人</label>
</div>
性別：
「氏名」「男性」「女性」法人」をクリックすると関連する入力部品が選択状態となります。
<div>
<label for="i1">氏名</label>:<input type="text" name="in01" size="30" id="i1">
</div>
<div>
性別：
<input type="radio" name="in02" value="1" id="i2"><label for="i2">男性</label>
<input type="radio" name="in02" value="2" id="i3"><label for="i3">女性</label>
<input type="radio" name="in02" value="3" id="i4"><label for="i4">法人</label>
</div>
<label for="i1">氏名</label>:<input type="text" name="in01" size="30" id="i1">
</div>
<div>
性別：
<input type="radio" name="in02" value="1" id="i2"><label for="i2">男性</label>
<input type="radio" name="in02" value="2" id="i3"><label for="i3">女性</label>
<input type="radio" name="in02" value="3" id="i4"><label for="i4">法人</label>
</div>
:
性別：
for属性を使用することにより、入力部品のidとラベルを関連付けることも可能です。
accesskeyを使用しショートカット入力を可能とする
<div>
<label for="a1">氏名</label>:<input type="text" name="in11" size="30" id="a1">
</div>
<div>
性別：
<input type="radio" name="in12" value="1" id="a2"><label for="a2" accesskey="m">男性(M)</label>
<input type="radio" name="in12" value="2" id="a3"><label for="a3" accesskey="w">女性(W)</label>
<input type="radio" name="in12" value="3" id="a4"><label for="a4" accesskey="c">法人(C)</label>
</div>
<label for="a1">氏名</label>:<input type="text" name="in11" size="30" id="a1">
</div>
<div>
性別：
<input type="radio" name="in12" value="1" id="a2"><label for="a2" accesskey="m">男性(M)</label>
<input type="radio" name="in12" value="2" id="a3"><label for="a3" accesskey="w">女性(W)</label>
<input type="radio" name="in12" value="3" id="a4"><label for="a4" accesskey="c">法人(C)</label>
</div>
：
性別：
ショートカットキーで性別の入力が可能となります。
OSやブラウザによりシュートカットキーは異なります。
Windowsの場合「Alt」＋「M」を押下すると「男性」が選択できます。
留意事項
- for属性を指定しない記述方法は、対応していないブラウザもあります。
| 関連するHTMLタグ | |
|---|---|
| input_radio | ラジオボタン |
| input_checkbox | チェックボックス |
| input | 入力欄、選択入力、ボタン |
広告