我只是想知道如何以正确的方式在单选按钮上使用新的HTML5输入属性“ required”。是否每个单选按钮字段都需要下面的属性，或者只有一个字段就足够了吗？
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
如何在“无线电”输入字段中使用“必需”属性
第2729篇《如何在“无线电”输入字段中使用“必需”属性》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共5个回答
这是带有本机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="other" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>尽管我非常支持使用原生HTML5验证的简约方法，但从长远来看，您可能希望将其替换为Javascript验证。Javascript验证为您提供了对验证过程的更多控制，它使您可以设置实型类（而不是伪类）来改善（有效）字段的样式。如果Javascript损坏（或缺少），则本机HTML5验证可以作为您的后备。您可以在这里找到一个示例，以及受安德鲁·科尔（Andrew Cole）启发的其他一些有关如何制作更好形式的建议。
如果您的单选按钮已经过自定义，例如单选按钮的原始图标已通过CSS隐藏，display:none那么您可以创建自己的单选按钮，那么您可能会收到错误消息。
修复它的方法是替换display:none为opacity:0
您可以使用此代码段...
<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;
}
有关更多信息，您可以参考以下URL。
我必须使用required =“ required”以及相同的名称和类型才能进行验证。
输入type =“ radio” name =“ userradio” id =“” value =“ User” required =“必填”
输入type =“ radio” name =“ userradio” id =“” value =“ Admin”
输入type =“ radio” name =“ userradio” id =“” value =“来宾”
相似问题
问题类别
required为无线电组的至少一个输入设置属性。required所有输入的设置更加清晰，但不是必需的（除非动态生成单选按钮）。要对单选按钮进行分组，它们必须全部具有相同的
name值。这样一次只能选择一个，并应用于required整个组。另请注意：
资源