HTML ラベル要素の for 属性の目的

HTMLのlabelタグのfor属性は、紐づけるべきフォーム要素を指定します。

ラベル要素のfor属性の値とフォーム要素のid属性の値が一致していると、ラベル要素をクリックしたときに、フォーム要素にフォーカスまたは選択されます。これはユーザビリティを向上させ、ラベル要素をクリックするだけでフォーム要素を操作できるため、ユーザーにとってより便利になります。

たとえば、テキストボックスのインプットボックスがあり、それに関連するラベル要素があります。

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

ラベル要素をクリックした際は、テキストボックスの入力欄にフォーカスが当たり、そのまま入力することが可能です。for属性を使用していない場合、フォーカスを当てるためには入力欄をクリックする必要があります。

また、label要素のfor属性は、スクリーンリーダーなどで読み上げられるなどの補助的な情報を提供し、利用者がフォーム要素の用途をよりよく理解するのに役立ちます。