【Error】ラベルのエラーについて

はじめに

属性に関するエラーが発生しました。かくコードの量が多くなればなるほど、関係を明確にすることが大切なのはわかっていますが。少し理解したのでアウトプットの為に、記事にしていきたいと思います。

環境

• Windows, WSL
• Docker
• Ruby 3.2.3
• Rails 7.1.3

1：ラベルのエラーについて。例

The label's for attribute doesn't match any element id

👆上記エラーは、HTMLの<label>タグのfor属性に指定されたIDが、実際のフォーム要素のIDと一致していないことを示しています

例

まずは分かりやすくどういうことかの理解。
次のようなHTMLがあるとします。

<label for="prefecture">都道府県</label>
<input type="text" id="prefecture" name="prefecture">

この場合、for属性の値（prefecture）がinputのidと一致しているので正しいという事になります。

👇しかし、下記のようになっていたらエラーになります

<label for="wrong-id">都道府県</label>
<input type="text" id="prefecture" name="prefecture">

2：実際のエラーについて

<label class="mb-1 inline-block text-lg text-gray-800" for="post_line_id">路線名</label>
<select id="line_select" ...></select>

ここで、for属性がpost_line_idになっているけど、<select>タグのidはline_selectになっているから不一致！！エラー原因箇所がわかりました。

3：修正方法

for属性をline_selectに変更するか、<select>タグのidをpost_line_idに変更する必要がります。

修正例 1: for属性を変更

<label class="mb-1 inline-block text-lg text-gray-800" for="line_select">路線名</label>
<select id="line_select" ...></select>

修正例 2: idを変更

<label class="mb-1 inline-block text-lg text-gray-800" for="post_line_id">路線名</label>
<select id="post_line_id" ...></select>

4：コード上ではどうなるのか

先ほどの修正案では開発ツールのElementタブを修正となっていました。実際私はVscodeを使用してコードを入力しているのでこちら側ではどのような修正となるのか。

            <div class="mb-4">
              <%= f.label :prefecture_id, "都道府県", class: "mb-1 inline-block text-lg text-gray-800" %>
              <%= f.collection_select :prefecture_id, Prefecture.all, :id, :name, { prompt: "都道府県を選択" }, { id: "prefecture_id", class: "w-full rounded border bg-gray-50 px-3 py-3 text-gray-800 outline-none ring-customorange ring-opacity-40 transition duration-100 focus:ring" } %>
            </div>

            <div class="mb-4">
              <%= f.label :shooting_time, "おすすめ撮影時間", class: "mb-1 inline-block text-lg text-gray-800" %>
              <%= f.text_field :shooting_time, id: "shooting_time", class: "w-full rounded border bg-gray-50 px-3 py-3 text-gray-800 outline-none ring-customorange ring-opacity-40 transition duration-100 focus:ring", placeholder: "14時頃など", autocomplete: "address" %>
            </div>

ラベルの修正について

現在のコードでは、ラベルとフォーム要素のfor属性やidが自動的に生成される形になっています。ですが、エラー発生。つまり、明示的にラベルのfor属性を指定したり、要素のidを確認したりすることが解決につながる。

修正例

以下のように、ラベルのfor属性と対応する要素のidを明示的に指定することができます。
ここでは、ラベルのfor属性をprefecture_idとshooting_timeに設定しています。

<div class="mb-4">
  <%= f.label :prefecture_id, "都道府県", class: "mb-1 inline-block text-lg text-gray-800", for: "prefecture_id" %>
  <%= f.collection_select :prefecture_id, Prefecture.all, :id, :name, { prompt: "都道府県を選択" }, { id: "prefecture_id", class: "w-full rounded border bg-gray-50 px-3 py-3 text-gray-800 outline-none ring-customorange ring-opacity-40 transition duration-100 focus:ring" } %>
</div>

<div class="mb-4">
  <%= f.label :shooting_time, "おすすめ撮影時間", class: "mb-1 inline-block text-lg text-gray-800", for: "shooting_time" %>
  <%= f.text_field :shooting_time, id: "shooting_time", class: "w-full rounded border bg-gray-50 px-3 py-3 text-gray-800 outline-none ring-customorange ring-opacity-40 transition duration-100 focus:ring", placeholder: "14時頃など", autocomplete: "address" %>
</div>

さいごにまとめ

• Railsのフォームヘルパーを使うと、idが自動生成されるため、特に問題がなければそのままでも大丈夫になるそうですが、なぜかエラー。
• ラベルのfor属性と対応する要素のidを明示的に指定することでエラー解消につながるという事を知るきっかけとなりました。
• 今回の記事が何か参考になれば幸いです。