labelとinputを紐付け方と使い方を解説

今回はinputとlabelのひも付けについて解説します！
例えば下記のように↓↓

紐付いている例↓↓

紐付いていない例↓↓

直接inputをクリックしなくても
labelテキストを押すことでinputが作動しファイルがアップロードできるようになります！

inputとlabelを紐づけるメリット

1. ユーザビリティの向上：ラベルをクリックするだけで、関連する入力フィールドにフォーカスが移動する。
2. アクセシビリティの改善：スクリーンリーダーがラベルと入力フィールドの関係を正しく解釈できる。
3. モバイルでの操作性向上：小さな画面でもタップしやすくなる。

この記事では、inputとlabelを紐づけて入力やクリックをする方法を2つ解説します。ユーザビリティに加え柔軟なデザインが実現できるようになりますよ！

この記事でわかること

• forとidを使っての紐づけ方
• labelタグ内にinputタグを配置するやり方
• labelとinputの紐付けの実践例

forとidを使った紐づけ方

forとidに同じ名前を付ける

1. labelタグにfor属性を設定する
2. inputタグにid属性を設定し,labelのforと同じ値を設定する。

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

上記の”ユーザー名：”を押すとinputにフォーカスが移ると思います！

labelタグ内にinputタグを配置するやり方

1. labelタグを設定する
2. labelタグ内にinputタグを直接配置する

<label>
  パスワード：
  <input type="password" name="password">
</label>

forやidを指定しなくてもlabel内にinputを設置するだけでlabelとinputの紐づけができました！

単純に紐づけるだけならこのやり方が一番簡単なのでおすすめです！

labelとinputの紐付けの実践例

以下は、適切に紐付けされたフォームの例です：

<form>
  <div>
    <label for="name">名前 <span class="required">*</span>:</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div>
    <label for="email">メールアドレス <span class="required">*</span>:</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div>
    <label for="message">メッセージ:</label>
    <textarea id="message" name="message"></textarea>
  </div>
  <div>
    <label>
      <input type="checkbox" name="subscribe"> ニュースレターを購読する
    </label>
  </div>
<div>
    <label for="yes">はい</label>
    <input type="radio" id="yes" name="radio_btn">
    <label for="no">いいえ</label>
    <input type="radio" id="no" name="radio_btn">
</div>
  <button type="submit"　disabled>送信</button>
</form>

上記の例では、for属性とid属性を使用した紐付け、labelタグ内にinputタグを配置する方法の両方を紹介しました。

まとめ

labelとinputの適切な紐付けは、ウェブフォームのユーザビリティとアクセシビリティを大きく向上させるだけでなく、柔軟なデザインを施すためにも必須の知識となります。

本記事で紹介した2つの方法（for属性とid属性の使用、labelタグ内にinputタグを配置）を状況に応じて使い分けることで、より使いやすいフォームを作成できます。

以上、太郎でしたー！