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"