HTML5验证表单标签

Question

"label元素的for属性必须引用表单控件。"

说实话，我不理解标记有什么问题。我查看了W3的很多内容，但就是看不懂。

帮忙吗？

HTML：

<form action="process.php" method="post">
    <div>
        <label for="name">Name</label><br />
        <input type="text" value="" name="name" />
    </div>
    <div>
        <label for="email">E-mail</label><br />
        <input type="text" value="" name="email" />
    </div>
    <div>
        <label for="message">Message</label><br />
        <textarea name="message" cols="30" rows="4"></textarea>
    </div>
    <div>
        <input type="checkbox" value="yes" name="newsletter" />
        <label for="newsletter">Subscribe to newsletter</label>
    </div>
    <div>
        <input type="submit" value="Submit" name="subscribe" />
    </div>
</form>

- technopeasant

---

只是好奇：你是怎么知道有问题的？是表单验证失败了吗？ - james.garriss

是的先生！我总是验证我的页面……并且对于黑客和奇怪的事情被标记也没有问题。 - technopeasant

Answer 1

你缺少了id属性。

所以为了修复它，例如：

<input type="text" value="" name="email" id="email" />

就是这样了。 链接。

- thirtydot

---

从4个错误增加到了13个。取出其中的一些元素，逐个找出问题所在。这里是仅验证“名称”输入的验证。http://cl.ly/2L0Q15020N0723180h1V - technopeasant

应该将 id 属性放在 input 标签上，而不是 label 上。请查看我通过验证器链接的示例页面：http://jsbin.com/alake4/edit 另外，您不希望在 label 标签上使用 value 属性（或 type="text"）。 - thirtydot

当前编辑草案指出：“可以指定for属性以指示与标题相关联的表单控件。如果指定了该属性，则该属性的值必须是标签元素所在文档中可标记元素的ID。”因此@thirtydot是正确的。 - james.garriss

Answer 2

Thirtydot是正确的；你的表单中缺少一个ID。我已经添加了所有。 请检查：

<form action="process.php" method="post">
    <div>
        <label for="name">Name</label><br />
        <input type="text" id="name" value="" name="name" />
    </div>
    <div>
        <label for="email">E-mail</label><br />
        <input type="text" id="email" value="" name="email" />
    </div>
    <div>
        <label for="message">Message</label><br />
        <textarea name="message" id="message" cols="30" rows="4"></textarea>
    </div>
    <div>
        <input type="checkbox" id="newsletter" value="yes" name="newsletter" />
        <label for="newsletter">Subscribe to newsletter</label>
    </div>
    <div>
        <input type="submit" value="Submit" name="subscribe" />
    </div>
</form>

- Varun Sridharan