WEB技術の辞書・解説・使用例

TOP > HTML >  HTMLタグ辞典 >  <label>
<label>  フォーム  グループ化 

フォーム部品と項目名(ラベル)を関連付ける


フォームの部品と、その項目名(ラベル)を関連付けるためのタグです。 また、関連付けられたテキスト部分をクリックしてもフォーカスやチェックをすることができます。

<LABE>タグの用い方

ラベルとフォーム部品の連携の仕方は2通りあります。

●①<LABEL>タグのfor属性 と <INPUT>タグのid属性を同一の値にする。
 (例) <label for="user_name">名前:</label> <input type="text" name="name" id="user_name">
●②<LABEL>~</LABEL>の中に<INPUT>部品を入れる。
 (例) <label>名前:<input type="text" name="name" id="namae"></label>

主要パラメーター

●accesskey="key" …accesskey="A" とすることでALT+A キー押した時にフォーカスされます。
●for="for" …連携させたいフォームの部品のID属性の値を指定。(#は不要)。

ラベル有り①のサンプルコード

<form action="cgi-bin/formmail.cgi" method="post">
<label for="namae" accesskey="n">名前:</label>
<input type="text" name="name" id="namae"><br>
性別:<input type="radio" name="gender" value="1" id="male">
<label for="male" accesskey="m">男</label>
<input type="radio" name="gender" value="2" id="female">
<label for="female" accesskey="f">女</label><br>
<input type="submit" value="送信">
</form>


性別:

ラベル有り②のサンプルコード

<form action="cgi-bin/formmail.cgi" method="post">
<label>名前:
<input type="text" name="name" id="namae"></label><br>
性別:
<label><input type="radio" name="gender" value="1" id="male">男</label>
<label><input type="radio" name="gender" value="2" id="female">女</label><br>
<input type="submit" value="送信">
</form>

性別:

ラベル無しのサンプルコード

<form action="cgi-bin/formmail.cgi" method="post">
名前:
<input type="text" name="name" id="namae"><br>
性別:
<input type="radio" name="gender" value="1" id="male">男
<input type="radio" name="gender" value="2" id="female">女<br>
<input type="submit" value="送信">
</form>
名前:
性別:



HTMLの一般属性

属性説明
class="~"クラス名を指定。使用例
id="~"IDを指定します。使用例
style="~"スタイルシートを直接記述。使用例
title="~"タイトルを指定します。
dir="ltr|rtl"文字の表示方向を指定。 ltr(左から右)、rtl(右から左)
lang="~"言語を指定。日本語の場合は"ja"