尽管for = id,点击标签也不会聚焦输入

时间:2014-12-08 22:10:42

标签: html forms input label for-attribute

我今天偶然发现了一个有趣的问题,似乎无法解决它。我的网站上有三个表单,它们都包含相同的表单字段。我有每个输入字段的标签,并希望在用户点击标签时聚焦文本输入(或者在单选按钮的情况下选择相关的收音机)。这适用于前两种形式,但标签不会对第三种形式的点击作出反应:

表格编号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">&nbsp;Frau&nbsp;</label>
<input type="radio" name="gender" value="herr" id="2_herr"><label class="radio-label" for="2_herr">&nbsp;Herr&nbsp;</label>
<br>
<label class="label1" for="2_firstname">Vorname</label>
<input type="text" name="firstname" id="2_firstname" placeholder="Vorname&#42;">
<br>
<label class="label1" for="2_lastname">Nachname</label>
<input type="text" name="lastname" id="2_lastname" placeholder="Nachname&#42;">
<br>
<label class="label1" for="2_email">E-Mail-Adresse&#42;</label>
<input type="text" name="email" id="2_email" placeholder="E-Mail-Adresse&#42;" required>

表格编号3(单击标签时无反应):

<label class="label1">Anrede</label>
<input type="radio" name="gender" value="frau" id="4_frau">
<label class="radio-label" for="4_frau">&nbsp;Frau&nbsp;</label>
<input type="radio" name="gender" value="herr" id="4_herr">
<label class="radio-label" for="4_herr">&nbsp;Herr&nbsp;</label>
<br>
<label class="label1" for="3_firstname">Vorname</label>
<input type="text" name="firstname" id="3_firstname" placeholder="Vorname&#42;">
<br>
<label class="label1" for="3_lastname">Nachname</label>
<input type="text" name="lastname" id="3_lastname" placeholder="Nachname&#42;">
<br>
<label class="label1" for="3_email">E-Mail-Adresse&#42;</label>
<input type="text" name="email" id="3_email" placeholder="E-Mail-Adresse&#42;" required>

它们都包含在<form></form>元素中。我还比较了两种形式,除了=&#34;&#34;和id =&#34;&#34;属性一切都是一样的。我也尝试将<input> - 元素包装到<label> - 元素中,这也不能解决问题。问题同样出现在Chrome和Firefox中。

非常感谢帮助,谢谢!

1 个答案:

答案 0 :(得分:0)

好的,我设法让它发挥作用。我使用的是bxslider-Plugin,每个表单都是一个包含在无序列表中的滑块元素。标签点击似乎不在最后一个列表项中,所以我只是添加了一个鬼列表项来解决这个问题。你是对的,没有必要对我发布的部分做任何事情。谢谢!