labelとは

ユーザインターフェイス要素の説明ラベルを表します。このラベルは、for属性を利用して、フォーム内のコントロール要素と明示的に関連付けすることができます。もしくは、label要素の中に、コントロール要素を内包する事によっても同じ用に関連付けができます。

labelで関連付けできる要素は、フォーム要素である場合が多いでしょう。しかし、そうでない要素も存在します。

ラベル付けできるHTML要素

• button
• input (if the type attribute is not in the hidden state)
• select
• textarea
• keygen
• meter
• output
• progress

labelの使用例

<form action="/contact/" method="put">

  <label>
    <input type="radio" name="meal" value="fish">Fish
  </label>

  <label>
    <input type="radio" name="meal" value="chicken">Chicken
  </label>

  <input type="submit" value="Send">
</form>

 

<form action="/contact/" method="put">

  <input id="radioFish" type="radio" name="meal" value="fish"><label for="radioFish">Fish</label>
  <input type="radio" name="meal" value="chicken"><label for="radioChicken">Chicken</label>

  <input type="submit" value="Send">

</form>

 

 

 

 

---

labelタグで利用可能な属性

この要素で利用可能なタグ属性とその値についてです。

Attribute	Value	Description
for	要素の名前（ID）	ラベルが対応するフォーム内のコントロール要素を指定する。ラベルのクリックイベントを対応するコントロール要素のイベントとして処理するようになる。
form	フォームの名前	そのラベルが所属するフォームを明示的に関連付ける