label要素とは

<label（ラベル）>要素は、form（フォーム） field（フィールド） label（ラベル） text（テキスト） の略で、 フォームの コントロール部品と関連するラベルを表す要素です。この<label>要素を使うことで、コントロール部品とそのラベルを関連付けすることが出来ます。これにより、視覚的にWEBサイトを閲覧することが困難なユーザーに対して、どのコントール部品のラベルかを伝えるサポートができます。また、 ラベルをクリックすることで、関連するコントール部品を選択状態になるようになります。

意味・役割
フォームのコントロール部品と関連するラベルを表す
利用できるバージョン（HTML4.01以降）
全てのバージョン
コンテンツ・カテゴリ
（HTML5より前：インライン要素）
コンテンツ・モデル（梱包できる要素）
フレージング・コンテンツ
ただし、 <label>要素内に、別の<label>要素は配置できない。また、そのラベルが示すコントロール部品（<input>、 <textarea>、 <select>、 <button>、 <keygen>、 <output>、 <meter>、<progress>）以外の要素も配置できない。
（HTML5より前：<label>要素以外のインライン要素）
この要素を配置できる親要素
フレージング・コンテンツが配置できる要素

サンプルコード

<label>要素は、ラベルとなるテキストと、コントロール部品のどちらもを囲む方法と、 <label>要素に、for属性で、コントロール部品のid名を指定して関連付ける方法の2つの方法でマークアップできます。どちらの方法でマークアップしても正しく関連付けができており、ラベルをクリックしたら、関連するコントロール部品が選択状態になります。ただし、Internet Explorer 6 はfor属性を使った方法にしか対応していません。

label要素にラベルと、コントロール部品のどちらもを囲んだサンプル

<label>要素にラベルとなるテキストと、コントロール部品のどちらもを囲む方法のマークアップ例です。

label要素のコード例1
<form action="" method="post">
  <p>
    <label>好きなこと：<input type="text" name="like"></label>
  </p>
  <p><input type="submit" value="送信"></p>
</form>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

label要素にfor属性を使ってコントロール部品と関連付けるサンプル

<label>要素にfor属性を使ってコントロール部品と関連付けるマークアップ例です。for属性には、関連付けるコントロール部品のid名を指定します。従って予めコントロール部品には、id属性を指定しておきましょう。

label要素のコード例1
<form action="" method="post">
  <p>
    <label for="like">好きなこと：</label>
    <input type="text" id="like" name="like">
  </p>
  <p><input type="submit" value="送信"></p>
</form>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

label要素で使える属性

どの要素にでも使えるグローバル属性と以下の属性が使えます。

for属性

for（フォー）属性は、ラベルと関連するコントロール部品のid名を指定する属性です。この属性で指定したid名を持つコントロール部品と関連付けされます。

<label for="関連するコントロール部品のid名">
属性値
関連するコントロール部品のid名
利用できるバージョン（HTML4.01以降）
全てのバージョン
使用例
<p>
  <label for="your_email">メールアドレス：</label>
  <input type="email" id="your_email" name="your_email">
</p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

form属性 HTML5で追加

form（フォーム）属性は、 <label>要素を、<form>要素の中に配置したかった場合に、関連する<form>要素を指定する属性です。 <label>要素を、<form>要素の中に配置したかった場合は必ず必要な属性で、属性値には<form>要素に指定した、id属性の値を指定します。

<label form="関連するform要素のid名">
属性値
<form>要素に指定した、id属性の属性値
利用できるバージョン（HTML4.01以降）
HTML5 〜
使用例
<form id="contact_form">
  <p><input type="submit" value="送信"></p>
</form>
<p><label>お名前：<input form="contact_form" type="text" name="your_name"></label></p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

label要素のサンプル

シンプルなお問い合わせフォームの例
<form action="" method="post">
  <dl>
    <dt><label for="your_name">お名前</label></dt>
    <dd>
      <input type="text" id="your_name" name="your_name">
    </dd>
    <dt><label for="your_email">メールアドレス</label></dt>
    <dd>
      <input type="email" id="your_email" name="your_email">
    </dd>
    <dt>性別</dt>
    <dd>
      <ul>
        <li>
          <label><input type="radio" name="gender" value="男性"> 男性</label>
        </li>
        <li>
          <label><input type="radio" name="gender" value="女性"> 女性</label>
        </li>
      </ul>
    </dd>
    <dt><label for="inquiry">お問い合わせ内容</label></dt>
    <dd>
      <textarea id="inquiry" name="inquiry" cols="30" rows="10"></textarea>
    </dd>
  </dl>
  <p><input type="submit" value="送信"></p>
</form>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

仕様

HTML5.1
4.10.4. The label element
HTML5
4.10.4 The label element
HTML4.01
17.9.1 The LABEL element

関連する要素

関連するレッスン