最終更新日 2021年4月7日

label要素

フォーム上の各項目にラベルを付けることができます。ラベルは、ユーザーのためのフォーム項目名や説明です。対象となるフォームコントロールにラベルを付けるには、以下の2つの方法があります。

・label要素のfor属性を使う。
・対象のフォームコントロールの要素を、label要素内の子要素として配置する。

for属性を使う場合は、対象のフォームコントロール要素でid属性を指定し、そのid属性の値を、label要素のfor属性の値に指定します。

label要素内の子要素としてフォームコントロール要素を配置する場合は、label要素のfor属性は指定しません。

form属性は、label要素と明示的に関連付けたいform要素のid属性の値を指定します。初期値では、直近の親要素であるform要素に関連付けられています。

label要素は、Phrasingコンテンツの記述箇所で使用できます。

HTML5での変更点

・form属性が新たに追加されました。
・datasrc、datafld、dataformatasの各属性は廃止されました。

カテゴリ	タグの省略	親要素	子要素
Flowコンテンツ Phrasingコンテンツ Interactiveコンテンツフォーム関連要素	省略不可	Phrasingコンテンツを子にできる要素	Phrasingコンテンツ（子孫にlabel要素を入れてはいけない）

属性	値	説明
form	ID	form要素のid属性の値を指定します。
for	ID	フォームコントロール要素のid属性の値を指定します。
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<body>
  <form method="post" action="contact.php">
    <fieldset>
      <legend>お問い合わせ</legend>
      <p><label>メールアドレス：<input type="email" name="mailad"></label></p>
      <p><label>タイトル：<input type="text" name="title"></label></p>
      <p><label>メッセージ：<textarea name="message"></textarea></label></p>
    </fieldset>
    <p>
      <input type="submit" name="submit" value="送信">
      <input type="reset" name="reset" value="リセット">
    </p>
  </form>
</body>

参考文献：W3C HTML5「4.10.6 The label element」

ザマワンにエントリーしました！

『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。