我只是想知道如何在radiobuttons上正确使用新的HTML5输入属性“required”。每个radiobutton字段是否都需要如下所示的属性？或者只有一个领域得到它就足够了吗？
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
为无线电组的至少一个输入设置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>另请注意：
为避免混淆是否需要单选按钮组，建议作者在组中的所有单选按钮上指定属性。实际上，一般来说，鼓励作者首先避免使用没有任何初始检查控件的单选按钮组，因为这是用户无法返回的状态，因此通常被认为是不良的用户界面。
如果您的单选按钮已被自定义，例如单选按钮的原始图标已通过css display:none隐藏，以便您可以创建自己的单选按钮，那么您可能会收到错误。
修复它的方法是用display:none替换opacity:0
这是一个非常基本但现代的必需radiobuttons实现，具有原生HTML5验证：
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>虽然我是使用本机HTML5验证的简约方法的忠实粉丝，但您可能希望从长远来看用Javascript验证替换它。 Javascript验证使您可以更好地控制验证过程，它允许您设置实际类（而不是伪类）以改进（有效）字段的样式。如果Javascript损坏（或缺少），这种本机HTML5验证可以是您的后备。你可以找到一个here的例子，以及一些关于如何制作Better forms的建议，灵感来自Andrew Cole。
您可以使用此代码段...
<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>
在其中一个select语句中指定“required”关键字。如果要更改其外观的默认方式。您可以按照以下步骤操作。如果您有意修改默认行为，这仅用于额外信息。
将以下内容添加到.css文件中。
/* style all elements with a required attribute */
:required {
background: red;
}
有关更多信息，请参阅以下URL。