<label> の仕様
カテゴリー | 使用できる場所(親要素) | コンテンツモデル(子要素) | タグ省略 |
フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ | フレージングコンテンツを子要素にもてる場所 | フレージングコンテンツ <label>は不可 ラベルの対象になってないラベル付け可能な要素は不可 | 不可 |
<label>の属性
【構文】
<label>~入力部品、ラベル~</label>
<label for="id">~ラベル~</label>
属性 | 意味 | 値のサンプルなど |
for="id名" | 関連付けする入力部品のid名 | for="id01" |
form="form id" | 関連付けたい<form>タグのID
※FORM内に定義する場合は不要
※HTML5で追加 | - |
ページTOP
<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>
ページTOP
<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>
ページTOP
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>
ページTOP
留意事項
- for属性を指定しない記述方法は、対応していないブラウザもあります。
ページTOP