今日、興味深い問題に出くわしましたが、解決できないようです。私のサイトには 3 つのフォームがあり、それらにはすべて同じフォーム フィールドが含まれています。入力フィールドごとにラベルがあり、ユーザーがラベルをクリックしたときにテキスト入力にフォーカスしたい (またはラジオ ボタンの場合は、関連するラジオを選択する)。これは最初の 2 つのフォームでは問題なく機能しますが、ラベルは 3 番目のフォームのクリックに反応しません。
フォーム番号 2 (異なる ID を持つフォーム 1 に類似したもので、どちらも問題なく動作します):
<label class="label1">Anrede</label>
<input type="radio" name="gender" value="frau" id="2_frau">
<label class="radio-label" for="2_frau"> Frau </label>
<input type="radio" name="gender" value="herr" id="2_herr"><label class="radio-label" for="2_herr"> Herr </label>
<br>
<label class="label1" for="2_firstname">Vorname</label>
<input type="text" name="firstname" id="2_firstname" placeholder="Vorname*">
<br>
<label class="label1" for="2_lastname">Nachname</label>
<input type="text" name="lastname" id="2_lastname" placeholder="Nachname*">
<br>
<label class="label1" for="2_email">E-Mail-Adresse*</label>
<input type="text" name="email" id="2_email" placeholder="E-Mail-Adresse*" required>
フォーム番号 3 (ラベルをクリックしても反応なし):
<label class="label1">Anrede</label>
<input type="radio" name="gender" value="frau" id="4_frau">
<label class="radio-label" for="4_frau"> Frau </label>
<input type="radio" name="gender" value="herr" id="4_herr">
<label class="radio-label" for="4_herr"> Herr </label>
<br>
<label class="label1" for="3_firstname">Vorname</label>
<input type="text" name="firstname" id="3_firstname" placeholder="Vorname*">
<br>
<label class="label1" for="3_lastname">Nachname</label>
<input type="text" name="lastname" id="3_lastname" placeholder="Nachname*">
<br>
<label class="label1" for="3_email">E-Mail-Adresse*</label>
<input type="text" name="email" id="3_email" placeholder="E-Mail-Adresse*" required>
それらは両方とも<form></form>要素にラップされます。また、2 つの形式を比較しましたが、for="" 属性と id="" 属性以外はすべて同じです。<input>また、要素を要素にラップしようとしました<label>が、これでも問題は解決しません。Chrome と Firefox で同じように問題が発生します。
助けていただければ幸いです。