【現役プログラマーが解説】HTMLのlabelタグにfor属性を指定するワケとは？

※本ページはプロモーションが含まれています。

本記事は、「そもそも何故、ラベル表示が必要なのかな」と思いつつ

UIHACK 編集長

・label(ラベル)の有無で何が変化するか知りたい人
・お問い合わせフォームなどで必須なlabel(ラベル)タグについて詳しく知りたい
・for属性の使い方などを知りたい人

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、「前半」では「labelタグの基本的な使い方」を「後半」では「for」属性とフォームの「id」属性を関連付ける方法を詳しく解説します。

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて一歩を踏み出しましょう。

それでは、ご一読ください！

HTMLのlabelタグの基本的な使い方とは？

HTMLのlabelタグは、フォーム要素（input要素やtextarea要素など）とその説明文（ラベル）を関連付けるために使用される要素です。これにより、ユーザーがフォームの入力項目に関連する説明を読み取ることができるようになります。

<label for="input_id">ラベルテキスト</label>
<input type="input_type" id="input_id" name="input_name">

ラベルテキスト

基本的な使い方は以下の通りです。

UIHACK 編集長

解説

この例では、ラベルテキスト「ラベルテキスト」が表示され、その右側にフォーム要素（input要素）が

配置されています。for属性の値が“input_id”となっているため、ラベルをクリックすると要素にフォーカスが移動します。

labelタグと「for」属性、そしてフォーム要素の「id」属性を関連付ける方法について解説します。

HTMLのlabelタグは、フォーム要素とその説明文（ラベル）を関連付けるために使用されます。ラベルをクリックすると、関連付けられたフォーム要素にフォーカスが移動することができるようになります。

以下がlabelタグと「for」属性、そしてフォーム要素の「id」属性を関連付ける方法の具体的な手順です。

label要素を使用する

ラベルとなるテキストやコンテンツを含むlabel要素を作成します。

<label>ラベルテキスト</label>

フォーム要素を作成する

フォーム要素（input要素やtextarea要素など）を作成します。このフォーム要素にラベルを関連付けます。

<input type="text" id="input_id" name="input_name">

for属性を使用して関連付ける

label要素に対してfor属性を追加し、その値にフォーム要素のid属性を指定します。このようにすることで、ラベルとフォーム要素が紐付けられます。

<label for="input_id">ラベルテキスト</label>
<input type="text" id="input_id" name="input_name">

フォーム要素にid属性を設定する

label要素のfor属性と関連付けるために、フォーム要素にid属性を指定します。id属性の値は、label要素のfor属性の値と一致させます。

<label for="input_id">ラベルテキスト</label>
<input type="text" id="input_id" name="input_name">

最後に解説します。

UIHACK 編集長

解説

このようにして、label要素の「for」属性とフォーム要素の「id」属性を関連付けることで、ユーザーがラベルをクリックした際に対応するフォーム要素にフォーカスが移動するようになります。正しく関連付けることで、フォームのアクセシビリティが向上し、ユーザーエクスペリエンスが向上します。

label要素にfor属性を指定するのは、フォーム作成時において非常に重要なことです。ラベルは、ユーザーがフォームに入力する項目を理解するのに役立つテキストのことです。

例えば、「お名前」という入力欄がある場合、それを説明する「お名前」というラベルを表示します。

スクリーンリーダーやスマホやタブレットを利用するユーザーにとっても、label要素とfor属性の関連付けは便利です。
スクリーンリーダーは、ラベルを読み上げてフォーム要素の意味を理解するのに役立ちます。また、スマホやタブレットを使う場合も、ラベルをタップすることで入力欄にアクセスしやすくなります。

labelタグを使用すると何が変わるのですか？

アクセシビリティの向上
labelタグを使用することで、フォーム要素とラベルが関連付けられ、スクリーンリーダーなどの支援技術を利用するユーザーにとってもフォームの内容が理解しやすくなります。ラベルを適切に関連付けることで、視覚障がい者やキーボード操作を利用するユーザーがウェブフォームをスムーズに操作できるようになります。
フォーム操作の便利性向上
labelタグを使用することで、ユーザーはラベルをクリックするだけで対応するフォーム要素にフォーカスを当てることができます。これにより、タッチデバイスを使用する場合や、マウスがない環境でもフォーム操作が便利になります。
コードの可読性とメンテナンス性の向上
labelタグを使用することで、コードがより読みやすくなります。ラベルとフォーム要素が明確に関連付けられるため、コードの意図が明確になります。また、将来的なコードの変更やメンテナンスがしやすくなります。

labelタグにfor属性を指定する必要があるのはなぜですか？

for属性を指定することで、labelタグと対応するフォーム要素を紐付けることができます。これにより、ラベルをクリックした際に自動的に対応する入力欄にフォーカスが移動するようになり、アクセシビリティとユーザーエクスペリエンスが向上します。

labelタグを使用したフォームデザインのメリットは何ですか？

labelタグを適切に使用することで、フォーム入力の理解性と使いやすさが向上します。ユーザーエクスペリエンスの向上に加えて、アクセシビリティの向上や検索エンジン最適化にも寄与するため、ウェブサイトの質を高めることができます。