如何在“radio”输入字段中使用“required”属性答案

【问题标题】：How to use the "required" attribute with a "radio" input field如何在“radio”输入字段中使用“required”属性
【发布时间】：2012-01-07 10:28:01
【问题描述】：

我只是想知道如何在单选按钮上以正确的方式使用新的 HTML5 输入属性“必需”。每个单选按钮字段是否都需要像下面这样的属性，或者如果只有一个字段获得它就足够了？

<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />

【问题讨论】：

标签： html radio-button required

【解决方案1】：

TL;DR：为无线电组的至少一个输入设置required 属性。

为所有输入设置required 更加清晰，但不是必需的（除非动态生成单选按钮）。

要将单选按钮分组，它们必须具有相同的name 值。这允许一次只选择一个并将required 应用于整个组。

<form>
  Select Gender:<br>

  <label>
    <input type="radio" name="gender" value="male" required>
    Male
  </label><br>

  <label>
    <input type="radio" name="gender" value="female">
    Female
  </label><br>

  <label>
    <input type="radio" name="gender" value="other">
    Other
  </label><br>

  <input type="submit">
</form>

还要注意：

为避免混淆是否需要单选按钮组，鼓励作者在组中的所有单选按钮上指定属性。实际上，一般来说，鼓励作者首先避免使用没有任何初始检查控件的单选按钮组，因为这是用户无法返回的状态，因此通常被认为是糟糕的用户界面。

Source

【讨论】：

@kumar_harsh ：必须选中标记为必需的任何复选框。同样，标记需要的复选框不会影响任何其他复选框（同名或不同名）。没有简单的标记来指示“这些 x 同名的复选框”，必须至少选中一个。
@Davdriver 是的，如果您愿意，您可以在所有单选按钮上指定它。事实上，w3c 写道：为了避免混淆是否需要单选按钮组，鼓励作者在组中的所有单选按钮上指定属性。（请参阅 w3.org/TR/html5/forms.html#the-required-attribute i>代码示例)
对不起，但以下是一堆废话：确实，一般来说，鼓励作者避免一开始就没有任何初始检查控件的单选按钮组，因为这是一种状态用户无法返回，因此通常被认为是糟糕的用户界面。为什么？因为没有初始检查控件是完全有效 (UX) 的情况。
我还想补充一点，在某些情况下，没有初始化“选中”状态的单选按钮是一件非常好的事情，也是好的用户体验。就我而言，用户必须首先根据是/否答案的半长列表对某些对象进行分类。错误地回答这些问题会对下游逻辑产生不利影响。因此，我不能将答案默认为是或否，因为它会因用户分类的每个对象而异。他们可能会错过需要更改的数据并将错误数据输入数据库。或者任务被打断并且不确定他们从哪里停下来。
@Seybsen Nah，“总的来说”确实涵盖了这不是绝对的。但是这些标准机构从来没有举例说明使用他们的推荐实际上会是一个糟糕的用户界面，所以我想提供一个。他们听起来好像如果你使用它，你还没有考虑过你的用户体验。我希望其他开发人员有信心做出明智的设计选择——而不是盲目地默认每个单选按钮。

【解决方案2】：

我必须使用 required="required" 以及相同的名称和类型，然后验证工作正常。

<input type="radio" name="user-radio"  id="" value="User" required="required" />

<input type="radio" name="user-radio" id="" value="Admin" />

<input type="radio" name="user-radio" id="" value="Guest" />

【讨论】：

【解决方案3】：

你可以使用这段代码sn -p ...

<html>
  <body>
     <form>
          <input type="radio" name="color" value="black" required />
          <input type="radio" name="color" value="white" />
          <input type="submit" value="Submit" />
    </form>
  </body>
</html>

在其中一个选择语句中指定“必需”关键字。如果要更改其外观的默认方式。您可以按照以下步骤操作。如果您打算修改默认行为，这只是为了提供额外信息。

将以下内容添加到您的.css 文件中。

/* style all elements with a required attribute */
:required {
  background: red;
}

【讨论】：

【解决方案4】：

这是一个非常基本但现代的必需单选按钮实现，带有原生 HTML5 验证：

fieldset { 
  display: block;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  border: none;
}
body {font-size: 15px; font-family: serif;}
input {
  background: transparent;
  border-radius: 0px;
  border: 1px solid black;
  padding: 5px;
  box-shadow: none!important;
  font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
  opacity: 0; 
  position: absolute; 
  pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
  display: block;
  border: 1px solid black;
  border-left: 0;
  padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}

<form>
  <div>
    <label for="name">Name (optional)</label>
    <input id="name" type="text" name="name">
  </div>
  <fieldset>
  <legend>Gender</legend>
  <div class="checkboxes">
    <label for="male"><input id="male" type="radio" name="gender" value="male" class="hidden" required="required"><span>Male</span></label>
    <label for="female"><input id="female" type="radio" name="gender" value="female" class="hidden" required="required"><span>Female </span></label>
    <label for="other"><input id="other" type="radio" name="gender" value="other" class="hidden" required="required"><span>Other</span></label>
  </div>
  </fieldset>
  <input type="submit" value="Send" />
</form>

虽然我非常喜欢使用原生 HTML5 验证的简约方法，但从长远来看，您可能希望将其替换为 Javascript 验证。 Javascript 验证使您可以更好地控制验证过程，它允许您设置真实类（而不是伪类）以改进（无效）字段的样式。这种原生 HTML5 验证可以作为您在 Javascript 损坏（或缺少）的情况下的后备方案。您可以找到 here 的示例，以及有关如何制作 Better forms 的其他一些建议，灵感来自 Andrew Cole。

【讨论】：

在某些情况下，在所有性别元素上设置隐藏类是否真的可以在没有 javascript 的情况下将其删除？

【解决方案5】：

<form>
  Select Gender:<br>

  <label>
    <input type="radio" name="gender" value="male" required>
    Male
  </label><br>

  <label>
    <input type="radio" name="gender" value="female">
    Female
  </label><br>

  <label>
    <input type="radio" name="gender" value="other">
    Other
  </label><br>

  <input type="submit">
</form>

【讨论】：