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

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>&nbsp; Select Gender:&nbsp; <label><input type="radio" name="gender" value="male" required>Male</label>&nbsp; <label><input type="radio" name="gender" value="female">Female</label>&nbsp; <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 {&nbsp; background: transparent;&nbsp; border-radius: 0px;&nbsp; border: 1px solid black;&nbsp; padding: 5px;&nbsp; box-shadow: none!important;&nbsp; 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 {&nbsp; opacity: 0;&nbsp;&nbsp; position: absolute;&nbsp;&nbsp; pointer-events: none;}.checkboxes label {display: block; float: left;}input[type="radio"] + span {&nbsp; display: block;&nbsp; border: 1px solid black;&nbsp; border-left: 0;&nbsp; padding: 5px 10px;}label:first-child input[type="radio"] + span {border-left: 1px solid black;}input[type="radio"]:checked + span {background: silver;}<form>&nbsp; <div>&nbsp; &nbsp; <label for="name">Name (optional)</label>&nbsp; &nbsp; <input id="name" type="text" name="name">&nbsp; </div>&nbsp; <label>Gender</label>&nbsp; <div class="checkboxes">&nbsp; &nbsp; <label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>&nbsp; &nbsp; <label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>&nbsp; &nbsp; <label><input id="other" type="radio" name="gender" value="male" class="hidden" required><span>Other</span></label>&nbsp; </div>&nbsp; <input type="submit" value="Send" /></form>虽然我非常喜欢使用本地HTML 5验证的极简方法，但从长远来看，您可能希望用Javascript验证代替它。JavaScript验证为您提供了对验证过程的更多控制，它允许您设置真正的类(而不是伪类)，以改进有效字段的样式。本机HTML 5验证可以作为您在出现损坏(或缺少)Javascript的情况下的回退。你可以找到一个例子这里，以及其他一些关于如何更好的形式，灵感来自安德鲁·科尔.