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

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

今回学習するフォーム関連の要素
要素名 意味・役割
<label> コントロール部品のラベルを表す
今回のゴール

RERUN

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

フォームのラベルは、<label>タグで囲む

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

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

label要素の使い方

label要素は、コントロール部品とそのラベルを一緒に囲むパターンと、コントロール部品とは、離れた場所にあるラベルと関連づける方法の2種類の使い方があります。

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

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

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

label要素を使ってみよう 4:18

それでは、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

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

練習問題 10:45

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

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

RERUN

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

解答例

まとめ 17:04

ラベル要素の使い方はわかりましたか？

  • コントロール部品のラベルは、label 要素で表す
  • ラベルと部品を一緒に挟む方法がある
  • label要素に、for属性でコントロール部品のid名を指定する方法がある