ウェブランサー

<label> フォームの入力項目と項目名を関連付ける

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
タイプ -
取り扱い 標準

<label>タグは、<form>の各部品(チェックボックスや一行テキストエリアなど)と、その項目名を関連付けるために使用します。関連付けられた項目名をクリックすると、その項目が選択出来るようになります。

<label>タグに指定できる属性

accesskey="key"
アクセスキーを設定する際に使用します。
for="for"
フォームの部品で指定したID属性の値を指定する際に使用します。
id="", class=""
idやclass付けが出来ます。

使用方法

for属性を一致させる
<label>タグのfor属性の値と、各部品のid属性の値に同じものを指定する事で両者を関連付ける方法です。こちらのやり方を推奨します。
<label>~</label>で囲う
こちらは。<label>タグで項目と項目名を囲って関連付けます。対応していないブラウザがあるため、非推奨です。

<label>の使用サンプル

HTML
<form action="http://#####.com/form.php" method="post">
<input type="radio" name="seireki" value="2000" id="n00" />
<label for="n00">2000年</label>
<input type="radio" name="seireki" value="2001" id="n01" />
<label for="n01">2001年</label>
<input type="radio" name="seireki" value="2002" id="n02" />
<label for="n02">2002年</label>
<input type="radio" name="seireki" value="2003" id="n03" />
<label for="n03">2003年</label>
<input type="radio" name="seireki" value="2004" id="n04" />
<label for="n04">2004年</label>
<input type="radio" name="seireki" value="2005" id="n05" />
<label for="n05">2005年</label>
<input type="submit" value="決定" />
</form>
表示確認
西暦






<label>に関連するHTMLタグ

入力フォームに関連する要素
<command> ページ内のメニューに操作コマンドを設定する
<datalist> フォームの入力欄に入力候補となる選択肢を提供する
<fieldset> フォームの入力項目をグループ化する
<form> フォームを作成する
<input> フォームを構成する部品を作成する
<label> フォームの入力項目と項目名を関連付ける
<legend> 入力項目グループにタイトルを付ける
<meter> 規定範囲内の数量や測定値を表す
<optgroup> セレクトボックスの選択肢をグループ化する
<option> セレクトボックスの選択肢を作成する
<output> 計算結果やユーザーアクションの出力欄を作成する
<progress> 作業の進捗状況を示すプログレスバーを表示する
<select> セレクトボックスを作成する
<textarea> 複数行のテキストエリアを作成する