Clicking on the label does not focus the input despite = id
I stumbled upon an interesting problem today and cannot solve it. I have three forms on my site, they all contain the same form fields. I have labels for each input field and would like to focus the text input (or in case the radio buttons select the corresponding radio) when the user clicks on the label. This works great for the first two forms, however the labels do not respond to a click in the third form:
Form # 2 (similar to Form 1 with different IDs, both work fine):
<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>
Form No. 3 (without clicking on labels):
<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>
They are both wrapped in an element <form></form>
. I also compared the two forms, and apart from the = "and id =" "attributes, everything is the same. I also tried to wrap the elements <input>
in an element <label>
, that also doesn't solve the problem. The problem appears in Chrome and Firefox the same way.
Help is greatly appreciated, thanks!
source to share
Ok, I managed to get it to work. I am using bxslider-Plugin and each form was a slider element enclosed in an unordered list. Clicking the label doesn't work on the last list item, so I just added a ghost list item to fix that. You were right, you didn't need to do anything with the part I posted. Thank!
source to share