label

ラベル

機能

label 要素は、フォームコントロール（例えば、input 要素）に関連付けられたラベルを定義します。ラベルをクリックすると、関連付けられたフォームコントロールがフォーカスされるため、ユーザーにとってフォームの操作が容易になります。

クリック範囲の拡大: チェックボックスやラジオボタンの隣接するテキストをクリックすることで、チェックボックスやラジオボタンを選択できるようになります。これにより、ユーザーエクスペリエンスが向上します。

アクセシビリティの向上: スクリーンリーダーなどの支援技術がフォーム要素を正しく認識し、読み上げることができます。これにより、視覚障害者などのユーザーにとって使いやすいフォームが作成できます。

フォーム要素の関連付け: フォーム要素とその説明テキストを関連付けることができます。これにより、HTML の構造が明確になり、メンテナンスが容易になります。

よく設定する属性（attribute）と値

for:

ラベルが関連付けられるフォームコントロールの ID を指定します。
例: for=“username”

使い方

この例では、 label 要素を使用して、ユーザー名とパスワードの入力フィールドにラベルを関連付けています。

<form action="/submit-form" method="post">
  <label for="username">ユーザー名:</label>
  <input type="text" id="username" name="username_" /><br /><br />
  <label for="password">パスワード:</label>
  <input type="password" id="password" name="password_" /><br /><br />
  <button type="submit">送信</button>
</form>

使い方

この例では、チェックボックスとその説明テキストが関連付けられ、クリック範囲が拡大され、アクセシビリティが向上しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>カスタムチェックボックス</title>
  </head>
  <body>
    <label>
      <input type="checkbox" />
      <span class="custom-checkbox"></span>
      <span class="checkbox-label">オプション 1</span>
    </label>
  </body>
</html>