<label> / <fieldset> / <legend>

対応:		HTML 4（1997）

『label』はフォームコントロールとテキストを関連付ける要素、『fieldset』は関連するフォームコントロールをグループ化する要素、『legend』はそのグループの見出しを表示する要素です。

構文

<!-- labelのfor属性とinputのidを対応させる -->
<label for="username">ユーザー名：</label>
<input type="text" id="username" name="username">

<!-- labelでinputを囲む（for/id不要） -->
<label>メールアドレス：<input type="email" name="email"></label>

<!-- fieldsetとlegendでグループ化 -->
<fieldset>
  <legend>お届け先</legend>
  <label for="zip">郵便番号：</label>
  <input type="text" id="zip" name="zip">
  <label for="address">住所：</label>
  <input type="text" id="address" name="address">
</fieldset>

属性一覧

属性	概要
for（label）	関連付けるフォームコントロールの『id』を指定します。
form（label）	別の場所にあるフォームのidを指定して関連付けます。
disabled（fieldset）	グループ内のすべてのコントロールをまとめて無効化します。
form（fieldset）	関連付けるformのidを指定します。
name（fieldset）	fieldsetの名前を指定します。JavaScriptから参照する際に使用します。

サンプルコード

sample_label_fieldset_legend.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>label / fieldset / legend</title>
</head>
<body>

  <form>

    <!-- 個人情報グループ -->
    <fieldset>
      <legend>個人情報</legend>

      <p>
        <label for="fname">お名前：</label>
        <input type="text" id="fname" name="name">
      </p>
      <p>
        <label for="femail">メールアドレス：</label>
        <input type="email" id="femail" name="email">
      </p>
    </fieldset>

    <!-- 支払い方法グループ -->
    <fieldset>
      <legend>お支払い方法</legend>

      <p>
        <!-- labelでinputを囲む方法 -->
        <label><input type="radio" name="pay" value="card"> クレジットカード</label>
        <label><input type="radio" name="pay" value="bank"> 銀行振込</label>
        <label><input type="radio" name="pay" value="cash"> 代金引換</label>
      </p>
    </fieldset>

    <p><button type="submit">注文する</button></p>
  </form>

</body>
</html>

実行結果

「個人情報」「お支払い方法」という見出し付きの枠線で囲まれた2つのグループが表示されます。ラジオボタンはラベルをクリックしても選択できます。

サンプルページはこちら

概要

『label』要素を使うとテキストとフォームコントロールが紐付き、ラベル部分をクリックするだけで入力欄にフォーカスが移ったりチェックが切り替わったりします。これにより、特にチェックボックスやラジオボタンのクリック領域が広がり、アクセシビリティとユーザビリティが大きく向上します。入力欄が小さいモバイル環境では特に重要です。

『label』の使い方は2通りあります。①『for』属性に対象の『id』を指定する方法と、②『label』要素でコントロールを内包（ラップ）する方法です。どちらも同じ効果があります。

『fieldset』は関連するフォーム項目をグループ化し、『legend』でその名称を表示します。配送先・支払い方法・アンケートの設問グループなど、フォームを意味のかたまりに区切る際に活用してください。『disabled』属性をつけると、グループ内のコントロールをまとめて無効化できるため、条件によって入力不可にしたいセクションに便利です。

CSSによるfieldset・legendのカスタマイズ

ブラウザのデフォルトスタイルは地味なので、CSSでデザインを整える方法を紹介します。

<style>
  /* fieldsetのデフォルト枠をリセットして再スタイリング */
  fieldset {
    border: 2px solid #3498db;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
  }
  legend {
    padding: 0 8px;
    color: #3498db;
    font-weight: bold;
    font-size: 1rem;
  }
  /* ラベルをブロック要素にしてフォームを縦並びに */
  label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    font-size: 0.9rem;
    color: #555;
  }
  input[type="text"],
  input[type="email"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
  }
  /* フォーカス時のハイライト */
  input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  }
</style>

<fieldset>
  <legend>連絡先</legend>
  <p>
    <label for="name">お名前</label>
    <input type="text" id="name" name="name">
  </p>
  <p>
    <label for="email">メールアドレス</label>
    <input type="email" id="email" name="email">
  </p>
</fieldset>

JavaScriptによるfieldsetの動的無効化

フォームの条件によってセクション全体を有効・無効に切り替えるパターンです。

// fieldset全体を無効化・有効化する
var section = document.getElementById("billing-section");

// 「請求先が配送先と異なる」チェックボックスで切り替え
var toggle = document.getElementById("diff-billing");
toggle.addEventListener("change", function() {
  section.disabled = !this.checked;
});

// JavaScriptからlabelとinputの関連付けを確認する
var label = document.querySelector('label[for="name"]');
console.log(label.control);  // 関連付けられたinput要素を返す