概要

<label> は、フォームの入力欄に説明や名前を付ける ラベル（説明文）を表示するタグ です。 関連する <input> などのフォーム要素と結び付けて ユーザー操作を助けます。

基本的な使い方

See the Pen <form>タグについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

<label for="username">ユーザー名</label>
<input type="text" id="username" name="username">

for 属性でラベルがどの入力欄に対応するかを指定します。 ラベルをクリックすると該当の入力欄が自動でフォーカスされます。

出力される内容の例

<label for="username">ユーザー名</label>
<input type="text" id="username" name="username">

役割とメリット（定義リスト形式）

アクセシビリティ向上

スクリーンリーダーや音声ブラウザがフォームを正しく読み上げられるようになります。

操作性の向上

ラベルをクリックすると関連する入力欄にフォーカスが移るため操作がスムーズです。

見た目の統一

フォームのラベル部分に一貫性を持たせ、UI を整えられます。

注意点

• for 属性の値は対応する id 属性と一致させる必要があります。
• label の中に input を直接入れる場合、for 属性は不要です。

まとめ

<label> は、フォームの入力欄に説明を付けるのに不可欠なタグです。 アクセシビリティと操作性の向上、見た目の統一を図るため、 フォーム実装時には積極的に利用しましょう。