最終更新日
フォーム上の各項目にラベルを付けることができます。ラベルは、ユーザーのためのフォーム項目名や説明です。対象となるフォームコントロールにラベルを付けるには、以下の2つの方法があります。
・label要素のfor属性を使う。
・対象のフォームコントロールの要素を、label要素内の子要素として配置する。
for属性を使う場合は、対象のフォームコントロール要素でid属性を指定し、そのid属性の値を、label要素のfor属性の値に指定します。
label要素内の子要素としてフォームコントロール要素を配置する場合は、label要素のfor属性は指定しません。
form属性は、label要素と明示的に関連付けたいform要素のid属性の値を指定します。初期値では、直近の親要素であるform要素に関連付けられています。
label要素は、Phrasingコンテンツの記述箇所で使用できます。
カテゴリ | タグの省略 | 親要素 | 子要素 |
---|---|---|---|
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>