如何在“无线电”输入字段中使用“必需”属性

Question

如何在“无线电”输入字段中使用“必需”属性我只是想知道如何使用新的HTML 5输入属性“所需”的无线电按钮正确的方式。每个无线电按钮字段都需要下面这样的属性吗？或者只要一个字段就够了吗？<input type="radio" name="color" value="black" required="required" /><input type="radio" name="color" value="white" required="required" />

Answer 1

设置required属性，用于无线电组的至少一个输入。

设置required对于所有输入都比较清楚，但没有必要(除非动态生成单选按钮)。

要对单选按钮进行分组，它们都必须具有相同的name价值。这允许一次只选择一个并应用required给整个团队。

<form>

  Select Gender:

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

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

  <input type="submit">

</form>

还注意到：

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

来源

Answer 2

如果您的单选按钮已自定义，例如，单选按钮的原始图标已通过css隐藏。display:none这样您就可以创建您自己的单选按钮，然后您可能会得到错误。

修复它的方法是替换display:none带着opacity:0

Answer 3

下面是一个非常基本但现代的实现，它使用本机HTML 5验证来实现所需的无线电按钮：

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>

  <label>Gender</label>

  <div class="checkboxes">

    <label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>

    <label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>

    <label><input id="other" type="radio" name="gender" value="male" class="hidden" required><span>Other</span></label>

  </div>

  <input type="submit" value="Send" />

</form>

虽然我非常喜欢使用本地HTML 5验证的极简方法，但从长远来看，您可能希望用Javascript验证代替它。JavaScript验证为您提供了对验证过程的更多控制，它允许您设置真正的类(而不是伪类)，以改进有效字段的样式。本机HTML 5验证可以作为您在出现损坏(或缺少)Javascript的情况下的回退。你可以找到一个例子这里，以及其他一些关于如何更好的形式，灵感来自安德鲁·科尔.