フォームのラベルと部品を関連付ける

前回(Chapter16)、フォーム関連の要素を学習しました。一般的なフォームは、ユーザーが何を入力(または、選択)すればいいのかを表すラベルと、実際に入力(または、選択)するコントール部品があります。これらを関連付けることで、視覚的にWEBサイトを閲覧することが困難なユーザーに対しても、どのラベルに対してのコントール部品かを伝えるサポートができます。また、ラベルをクリックすることで、コントール部品を選択状態にすることも可能になります。

フォームのラベルと部品を関連付ける要素
要素名 意味・役割
<label> コントロール部品のラベルを表す

label要素

<label>要素は、 formフォーム fieldフィールド labelラベル textテキスト の略で、コントロール部品のラベルとなるテキストを表す要素です。この<label>要素は、ラベルとなるテキストと、コントロール部品のどちらもを囲む方法と、 <label>要素に、for属性に、コントロール部品のid名を指定して関連付ける方法の2つの方法があります。

カテゴリ
コンテンツ・モデル
フレージング・コンテンツ
ただし、 <label>要素内に、別の<label>要素は配置できない。また、そのラベルが示すコントロール部品<input><textarea><select> など)以外の要素も配置できない。
主な属性
  • for属性: 関連付けるコントロール部品の id 名を指定する

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

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

label要素の例1
<form action="" method="post">
  <p>
    <label>
        お名前:<input type="text" name="your_name">
    </label>
  </p>
  <p><input type="submit" value="送信"></p>
</form>
ブラウザでの表示例

RERUN

ラベルをクリックするとテキストフィールドにカーソルが入ります。

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

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

label要素の例2
<form action="" method="post">
  <p>
    <label for="your_name">お名前:</label>
    <input type="text" id="your_name" name="your_name">
  </p>
  <p><input type="submit" value="送信"></p>
</form>
ブラウザでの表示例

RERUN

こちらの方法でも、ラベルをクリックするとテキストフィールドにカーソルが入ります。 上記2つの方法に動作の違いはありませんので、 <label>要素はどちらの方法でマークアップしても問題ありません。ただし、Internet Explorer 6for属性を使った方法にしか対応していないので、Internet Explorer 6に対応する場合は、for属性を使って、ラベルとコントロール部品を関連付けましょう。

label要素を使ってみよう

それでは、<label>要素を使ってラベルとコントロール部品を関連付けましょう。

  1. 「Chapter17」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、<label>要素をマークアップ
Chapter17/index.html
<h1>僕の仲間募集フォーム</h1>
<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_mail">メールアドレス</label></dt>
    <dd>
      <input type="text" id="your_mail" name="your_mail">
    </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>出来ること(複数選択可)</dt>
    <dd>
      <ul>
        <li>
          <label><input type="checkbox" name="skill" value="HTML">HTML</label>
        </li>
        <li>
          <label><input type="checkbox" name="skill" value="CSS">CSS</label>
        </li>
        <li>
          <label><input type="checkbox" name="skill" value="JavaScript">JavaScript</label>
        </li>
        <li>
          <label><input type="checkbox" name="skill" value="PHP">PHP</label>
        </li>
        <li>
          <label><input type="checkbox" name="skill" value="SQL">SQL</label>
        </li>
        <li>
          <label><input type="checkbox" name="skill" value="Photoshop">Photoshop</label>
        </li>
        <li>
          <label><input type="checkbox" name="skill" value="Illustrator">Illustrator</label>
        </li>
      </ul>
    </dd>
  </dl>
  <p><input type="submit" value="送信する"></p>
</form>
  1. 上書き保存し、ブラウザでラベルをクリックするとコントロール部品が選択状態になるかを確認
ブラウザでの表示例

RERUN

練習問題

「Chapter17」フォルダ内の「traning.html」を開いて下記の問題を解いてみましょう。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。

    • 文字列「お名前」
      • 関連付けるテキストフィールドのid名: "your_name"
    • 文字列「メールアドレス」
      • 関連付けるテキストフィールドのid名: "your_mail"
    • 文字列「東京本店」とそのラジオボタン
    • 文字列「大阪店」とそのラジオボタン
    • 文字列「福岡店」とそのラジオボタン
    • 文字列「お問い合わせ種別」
      • 関連付けるセレクトボックスのid名: "type"
    • 文字列「お問い合わせ内容」
      • 関連付けるテキストエリアのid名: "inquiry"
ブラウザでの完成例

RERUN

解答例