こんにちは、@Manabu です。
サイトの動作に影響がなくても、検証ツールでは発生してしまっているエラーってよくありますよね。
今回は、「Duplicate form field id in the same form」というエラーが発生していたので、どの様なエラーでどうすれば解消するのかまとめていきます。
Duplicate form field id in the same formとは？
このエラーは、1つのHTMLフォーム内において、複数の要素が同じid属性を持っている場合に発生します。
HTMLのid属性は、ドキュメント内で一意である必要があるため、同じidが複数の要素に割り当てられているとエラーが発生します。
エラーの例
例えば、以下の様な入力フォームが存在するとエラーが発生します。
<input type="text" id="name" name="name" class="Form-Item-Input" placeholder="例）山田 太郎">
<input type="email" id="name" name="email" class="Form-Item-Input" placeholder="例）example@example.com">こちらは、それぞれ名前とメールアドレスを入力する欄ですが、id属性が同じ「name」になってしまっているため、以下の様なエラーが発生します。
解決策
エラーを解決するためには、すべてのid属性を一意にする必要があります。
静的なフォームの場合
先ほどの例だと、以下のように適切なid属性を設定することで解消します。
<input type="text" id="name" name="name" class="Form-Item-Input" placeholder="例）山田 太郎">
<input type="email" id="email" name="email" class="Form-Item-Input" placeholder="例）example@example.com">開発中に、一つのフォームをコピーしたりすると、変え忘れてしまったりすることがあるので気をつけましょう。
動的なフォームの場合
JavaScriptで、動的に同じフォームを生成していたりする場合にも、考慮する必要があります。
その場合は、一意の値をid属性に付与するようにカスタマイズする必要があります。
まとめ
「Duplicate form field id in the same form」エラーは、HTMLの基本的なルールであるidの一意性を守ることで回避できます。
フォームが動的に生成される場合や、複数の要素を扱う際は、意図せずidが重複しないように注意しましょう。