html5：复选框/收音机中名为 required 的属性的意义答案

【问题标题】：html5: Significance of attribute named required in checkbox/radiohtml5：复选框/收音机中名为 required 的属性的意义
【发布时间】：2011-02-04 18:28:43
【问题描述】：

在提交表单时，您怎么可能将复选框/单选按钮标记为必需？

灵感来源：Pekka 的answer 到question

【问题讨论】：

标签： html attributes specifications

【解决方案1】：

必填复选框并不罕见。几乎每个注册表单都使用某种形式的“我已阅读并接受用户协议”复选框。

如果你有 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>

【讨论】：

你不需要required="required"，加required就够了。
required="required" 是有效的 XHTML。属性必须有值。
XHTML 不是 HTML5 的要求
naveen，兄弟，你错过了这一点，因为即使是有经验的程序员也往往会在工作时忘记或忽略一些常见的事情，并且遇到更大的问题，如应用程序流等。 :) 每个程序员都面临逻辑错误。 naveen，我谢谢你，你的问题帮助了我自己。我正在做一个项目。研发是否发现了必需的属性，现在我记得了。好吧，包括 Emily、Ben、@leggetter 和 Neil 的 cmets 在内的每个人都分享了有用的信息。谢谢大家。
但是你必须关闭你的<form> :)

【解决方案2】：

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

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

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

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

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

对于单选按钮，只有当该单选组中的一个单选按钮被选中时，才应满足 required 属性。

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

【讨论】：

+1 用于猜测。除非你提出更有力的论据，否则极不可能:)
你猜怎么着？刚刚根据html5 sepcs更新了答案
+1 规格很明确，但这仍然是奇怪。从 UI 的角度来看没有任何意义。
@Joe Hopfgartner 引用的问题在于它来自当前非权威来源：whatwg.org/specs/web-forms/current-work 那是旧的 Web Forms 2 工作；文档的顶部承认它已被 HTML5 取代。不要将您的期望建立在该文档上！
虽然您所说的单选按钮是正确的（任何一个单选按钮上的required 意味着必须检查所有同名单选按钮之一），但看起来只有必须检查具有required 属性的复选框，而不是所有具有相同名称的复选框。正如您在this fiddle 中看到的那样，只需选中前两个复选框，而不是第三个。至少在 Chrome 中！

【解决方案3】：

我今天在 XP SP2 上的 Firefox 17.0.1 上测试了单选按钮的 required 属性。

它似乎符合单选按钮/组的 required 属性规范。当 Firefox 提示“请选择这些选项之一”时。对于下面的两个代码sn-ps：

您为每个单选按钮设置必需属性

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

或任何一个 Radio 元素

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

欢迎任何 cmets 和更新。

【讨论】：

规范链接：w3.org/TR/html-markup/… 任何人都可以找到参考，指出这两种样式中的哪一种更适合根据需要标记单选按钮组？我在任何地方都找不到。

【解决方案4】：

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

例如这行得通：

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

【讨论】：

Chrome 12 也是如此。 Safari 5 和 IE 9 没有。在 Win7 上测试。