最終更新日

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」外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。