我今天偶然发现了一个有趣的问题,但似乎无法解决。我的网站上有三种表单,它们都包含相同的表单字段。我为每个输入字段都有标签,并希望在用户单击标签时聚焦文本输入(或者在单选按钮的情况下选择关联的单选按钮)。这适用于前两种形式,但标签不会对第三种形式的点击使用react:
表格 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(点击标签时无 react ):
<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>
元素。我还比较了这两种形式,除了 for=""和 id=""属性之外,一切都是一样的。我还尝试包装 <input>
-元素进入<label>
-元素,这也不能解决问题。问题同样出现在 Chrome 和 Firefox 中。
非常感谢您的帮助,谢谢!
最佳答案
好的,我设法让它工作了。我正在使用 bxslider-Plugin,每个表单都是一个包含在无序列表中的 slider 元素。标签点击似乎在最后一个列表项中不起作用,所以我只是添加了一个幽灵列表项来解决这个问题。你是对的,不必对我发布的部分做任何事情。谢谢!
关于html - 尽管 for=id,但单击标签不会聚焦输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27367946/