<label> を使う2つの理由
1.アクセシビリティの向上（機械のため）
<label> で関連づけられていないと、スクリーンリーダーは「テキスト入力欄」「チェックボックス」として読み上げません。
label を正しく使うと、「お名前、テキスト入力欄」「利用規約に同意、チェックボックス」のように、何のためのフォーム部品なのかを明確に読み上げてくれます。
2.ユーザビリティの向上（人間のため）
<label> とその入力欄を関連づけると、ラベルの文字部分をクリックしても入力欄が選択されるようになります。
これは、特にスマートフォンなどで、タップする範囲が広がるため非常に便利です。特に、ラジオボタンやチェックボックスのような小さな選択肢では、この機能があるかないかで使いやすさが変わります。
関連付けの方法
この関連付けは、<label> の for 属性と、フォームの部品の id 属性の値と同じにすることで実現します。
<label for="user-name">お名前</label>
<input type="text" id="user-name" name="username">
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フロントエンド1000本ノック 0008</title>
</head>
<body>
<main>
<h1>お問い合わせフォーム</h1>
<form action="/submit-form" method="post">
<label for="user-name">お名前</label>
<input type="text" id="user-name" name="user-name">
<label for="inquery-type">お問い合わせ種別</label>
<select id="inquery-type" name="inquery-type">
<option value="1">商品について</option>
<option value="2">サービスについて</option>
<option value="3">その他</option>
</select>
<label for="inquery-content">お問い合わせ内容</label>
<textarea id="inquery-content" name="inquery-content"></textarea>
<button type="submit">送信</button>
</form>
</main>
<footer>
<p>Copyright 2025</p>
<p>フロントエンド1000本ノック</p>
</footer>
</body>
</html>