尽管 for=id，单击标签不会集中输入

Posted 2023-02-22

【中文标题】尽管 for=id，单击标签不会集中输入

【英文标题】：Click on label does not focus input despite for=id

【发布时间】：2015-02-06 16:42:12

【问题描述】：

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

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> 元素中。我还比较了这两种形式，除了 for="" 和 id="" 属性之外，一切都是一样的。我还尝试将<input>-elements 包装到<label>-element 中，这也不能解决问题。问题同样出现在 Chrome 和 Firefox 中。

非常感谢您的帮助，谢谢！

【参考方案1】：

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