logo标签列表

如何在“单选框”输入字段中使用“required”属性

htmlradio-buttonrequired
583

我想知道如何正确地在单选按钮上使用新的HTML5输入属性"required"。每个单选按钮字段是否都需要像下面一样有这个属性，还是只有一个字段有它就足够了？

<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
5个回答
980

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>

同时还要注意：

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

来源

3
任何标记为必填的复选框都必须被勾选。同样，将一个复选框标记为必填对其他复选框（无论其名称是否相同）没有影响。没有简单的标记可以表示“对于这些具有相同名称的x个复选框，至少一个必须被勾选”。 - Brad Kent
4
@Davdriver，是的，如果你愿意，可以在所有单选按钮上指定它。实际上，w3c写道： 为了避免混淆单选按钮组是否必填，建议作者在组中的所有单选按钮上指定该属性。(请参见 https://www.w3.org/TR/html5/forms.html#the-required-attribute 中的代码示例) - Seybsen
8
抱歉，以下内容有些混乱：实际上，通常鼓励作者在设计单选按钮组时，避免没有任何初始选中控件的情况，因为这是用户无法返回的状态，因此通常被认为是一个糟糕的用户界面。为什么？因为没有初始选中的控件是完全有效的（用户体验）情况。 Translated: 很抱歉，以下是一堆混淆不清的话：事实上，通常鼓励作者避免在单选按钮组中没有任何初选控件的情况下设计，因为这种情况会使用户无法返回，通常被认为是一个较差的用户界面。为什么？因为没有初始选中的控件也是一种合理的（用户体验）情况。 - PussInBoots
14
我还想补充一点，在某些情况下，没有初始化“选中”状态的单选按钮是非常好的用户体验。在我的情况下，用户必须根据一份半长的是/否问题清单最初对某些对象进行分类。答案回答错误会对下游逻辑造成不利影响。因此，我不能将答案默认为是或否，因为每个用户要分类的对象的答案都会有所不同。他们可能会错过需要更改的一个对象，并将不良数据输入到数据库中。或者任务被打断并且不确定离开了何处。 - Joel Wigton
5
“一般来说”已经涵盖了这不是绝对的含义。但这些标准机构从未举出过什么情况下使用他们的建议会造成糟糕的用户界面，所以我想提供一个例子。他们让人觉得如果你使用了这种方式，你没有考虑你的用户体验。我希望其他开发者能够有信心做出明智的设计选择——而不是盲目地默认每个单选按钮。 - Joel Wigton
显示剩余7条评论
13

我必须同时使用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" />
6
这是一个非常基本但现代的实现，使用原生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损坏（或缺乏）的情况下作为后备。您可以在此处找到一个示例，以及一些其他建议，如何制作更好的表单，灵感来源于Andrew Cole。

在某些情况下，是否可以在没有JavaScript的情况下设置所有性别元素的隐藏类并成功移除它？ - Sam Hartman
5

您可以使用此代码片段来实现...

<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>

在一个选择语句中指定“required”关键字。如果您想改变其外观的默认方式，可以按照以下步骤操作。这只是额外信息，如果您有意修改默认行为。
将以下内容添加到您的 .css 文件中。
/* style all elements with a required attribute */
:required {
  background: red;
}

更多信息，请参考以下网址。

https://css-tricks.com/almanac/selectors/r/required/


（注：该网页是关于必填表单字段的CSS选择器的介绍）
0

<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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接