Html 如何在“radio”输入字段中使用“required”属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8287779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use the "required" attribute with a "radio" input field
提问by nerdess
I am just wondering how to use the new HTML5 input attribute "required" in the right way on radio buttons. Does every radio button field need the attribute like below or is it sufficient if only one field gets it?
我只是想知道如何在单选按钮上以正确的方式使用新的 HTML5 输入属性“必需”。是否每个单选按钮字段都需要像下面这样的属性，或者如果只有一个字段获得它就足够了？
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
回答by Seybsen
TL;DR: Set the requiredattribute for at least one input of the radio group.
TL;DR：required为无线电组的至少一个输入设置属性。
Setting requiredfor all inputs is more clear, but not necessary (unless dynamically generating radio-buttons).
required所有输入的设置更清晰，但不是必需的（除非动态生成单选按钮）。
To group radio buttons they must all have the same namevalue. This allows only one to be selected at a time and applies requiredto the whole group.
要将单选按钮分组，它们必须具有相同的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>Also take note of:
还要注意：
To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. Indeed, in general, authors are encouraged to avoid having radio button groups that do not have any initially checked controls in the first place, as this is a state that the user cannot return to, and is therefore generally considered a poor user interface.
为了避免混淆是否需要一个单选按钮组，鼓励作者在一个组中的所有单选按钮上指定属性。实际上，一般来说，鼓励作者首先避免使用没有任何初始检查控件的单选按钮组，因为这是用户无法返回的状态，因此通常被认为是糟糕的用户界面。
回答by James
If your radio buttons have been customised, for example the original icon for the radio button has been hidden via css display:noneso that you can create your own radio button then you will might be getting the error.
如果您的单选按钮已自定义，例如单选按钮的原始图标已通过 css 隐藏，display:none以便您可以创建自己的单选按钮，那么您可能会收到错误消息。
The way to fix it is to replace display:nonewith opacity:0
修复它的方法是替换display:none为opacity:0
回答by Dulith De Costa
You can use this code snippet ...
您可以使用此代码片段...
<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>
Specify "required" keyword in one of the selectstatements. If you want to change the default way of its appearance. You can follow these steps. This is just for extra info if you have any intention to modify the default behavior.
在其中一个选择语句中指定“ required”关键字。如果要更改其外观的默认方式。您可以按照以下步骤操作。如果您有意修改默认行为，这仅用于提供额外信息。
Add the following into you .cssfile.
将以下内容添加到您的.css文件中。
/* style all elements with a required attribute */
:required {
background: red;
}
For more information you can refer following URL.
有关更多信息，您可以参考以下 URL。
回答by JoostS
Here is a very basic but modern implementation of required radiobuttons with native HTML5 validation:
这是具有原生 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>Although I am a big fan of the minimalistic approach of using native HTML5 validation, you might want to replace it with Javascript validation on the long run. Javascript validation gives you far more control over the validation process and it allows you to set real classes (instead of pseudo classes) to improve the styling of the (in)valid fields. This native HTML5 validation can be your fall-back in case of broken (or lack of) Javascript. You can find an example of that here, along with some other suggestions on how to make Better forms, inspired by Andrew Cole.
尽管我非常喜欢使用原生 HTML5 验证的简约方法，但从长远来看，您可能希望将其替换为 Javascript 验证。Javascript 验证使您可以更好地控制验证过程，并允许您设置真实的类（而不是伪类）以改进（无效）字段的样式。如果 Javascript 损坏（或缺少），这种原生 HTML5 验证可以作为您的后备。您可以在此处找到一个示例，以及其他一些关于如何制作Better 表单的建议，灵感来自Andrew Cole。
回答by m k
I had to use required="required"along with the same name and type than validation worked fine.
我不得不使用required="required"相同的名称和类型，而不是验证工作正常。
input type="radio" name="userradio" id="" value="User" required="required"
input type="radio" name="userradio" id="" value="Admin"
input type="radio" name="userradio" id="" value="Guest"
