Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

トップページ
HTMLタグ辞典
<label> / <fieldset> / <legend>

<label> / <fieldset> / <legend>

『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から参照する際に使用します。

サンプルコード

<!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』属性をつけると、グループ内のコントロールをまとめて無効化できるため、条件によって入力不可にしたいセクションに便利です。