HTML5: 复选框/单选框中名为required的属性的意义

Question

HTML5: 复选框/单选框中名为required的属性的意义

htmlattributesspecifications

17

在表单提交时，你如何将复选框/单选按钮标记为必填项？

灵感来源：Pekka对一个question的answer

- naveen

4个回答

7

我今天在XP SP2上使用Firefox 17.0.1测试了单选按钮的required属性。它似乎符合单选按钮/组的required属性规范。因为Firefox会在以下两个代码片段中都提示"请选择其中一个选项。"：

要么为每个单选按钮设置required属性。

<input type="radio" name="gender" value="male" required="required" />
<input type="radio" name="gender" value="female" required="required" />

或者任何一个单选框元素

<input type="radio" name="color" value="blue" />
<input type="radio" name="color" value="red" required="required" />
<input type="radio" name="color" value="green" />

欢迎提出任何意见和更新。

- Ronnie Depp

2

有人能找到一个参考资料，表明哪个样式更适合将单选按钮组标记为必填项吗？我无法在任何地方找到它。规范链接：http://www.w3.org/TR/html-markup/input.radio.html#input.radio.attrs.required - Grilse

7

对于复选框，最好的方法可能是预先选择并将其设置为禁用。开个玩笑。

为确保组中选择了一个单选按钮，可以从默认选项开始或使用javascript进行验证。没有HTML方法来做到这一点，因为每个可能的选择都是有效的。

在html5中，复选框有一个required属性。

它们有点奇怪，所以让我引用一些东西来解释它们的工作原理。

对于复选框，只有在该表单中具有该名称的一个或多个复选框被选中时，才应满足必需属性。

对于单选按钮，只有在该单选按钮组中恰好有一个单选按钮被选中时，才应满足必需属性。

当然，您始终需要进行服务器端验证，因为客户端始终可以发送任何他希望的内容。只需使用这些方法以获得更好的用户体验。

- The Surrican

+1 猜测。除非您提出更有力的论据，否则这是极不可能的。 - naveen

猜测是什么？根据HTML5规范刚刚更新了答案。 - The Surrican

1

+1 规格很清晰，但这仍然很“奇怪”。从用户界面的角度来看，毫无意义。 - Pekka

@Joe Hopfgartner的引用问题在于它来自目前不具权威性的来源: whatwg.org/specs/web-forms/current-work。那是旧的Web Forms 2工作;文档顶部承认它已被HTML5取代。不要以该文件为基础来建立您的期望值! - james.garriss

虽然你所说的单选按钮是正确的（在任何一个单选按钮上设置required属性意味着必须选中相同名称的所有单选按钮中的一个），但似乎只有带有required属性的复选框需要被选中，而不是所有具有相同名称的复选框。正如您在这个fiddle中看到的那样，在Chrome中只有前两个复选框需要被选中，而不是第三个。 - BenMorel

0

我刚在Firefox 4中尝试了一下单选按钮。将required添加到一个单选输入框，然后在选择之前提交，会触发一个“请选择其中一个选项”的工具提示。

例如，这样可以正常工作：

<input type="radio" name="gender" value="m" required />
<input type="radio" name="gender" value="f" />

- Ben

Chrome 12也是这样的。Safari 5和IE 9则不行。在Win7上进行了测试。 - james.garriss

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Emily · Accepted Answer

需要勾选框并不罕见。实际上，几乎每个注册表单都使用了某种形式的“我已阅读并接受用户协议”的勾选框。

如果您手头有Opera，请尝试下面的代码。除非勾选了复选框，否则该表单将无法提交。

<!doctype html>
<html>

<head>
  <title>html5</title>
</head>

<body>
  <h1>html5 test</h1>
  <form action="/">
    <input type="checkbox" required="required" id="cb" name="cb">
    <label for="cb">required checkbox</label>
    <input type="submit">
  </form>
</body>

</html>