这里是一个非常基本但现代的实现所需的单选按钮与原生HTML5验证:

fieldset { display: block; margin-left: 0; margin-right: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; border: none; } 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> <fieldset> <legend>Gender</legend> <div class="checkboxes"> <label for="male"><input id="male" type="radio" name="gender" value="male" class="hidden" required="required"><span>Male</span></label> <label for="female"><input id="female" type="radio" name="gender" value="female" class="hidden" required="required"><span>Female </span></label> <label for="other"><input id="other" type="radio" name="gender" value="other" class="hidden" required="required"><span>Other</span></label> </div> </fieldset> <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.

TL;DR:至少为无线电组的一个输入设置所需的属性。

所有输入所需的设置更清楚，但不是必需的(除非动态生成单选按钮)。

要对单选按钮进行分组，它们必须具有相同的name值。这一次只允许选择一个，并适用于整个组。

< >形式 选择性别:< br > <标识> <input type="radio" name="gender" value="male" required> 男性 < / >标签< br > <标识> <input type="radio" name="gender" value="female"> 女 < / >标签< br > <标识> <input type="radio" name="gender" value="other"> 其他 < / >标签< br > < input type = " submit " > > < /形式

还要注意:

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

源

我必须使用required="required"以及相同的名称和类型，然后验证工作正常。

<input type="radio" name="user-radio"  id="" value="User" required="required" />

<input type="radio" name="user-radio" id="" value="Admin" />

<input type="radio" name="user-radio" id="" value="Guest" /> 

< >形式 选择性别:< br > <标识> <input type="radio" name="gender" value="male" required> 男性 < / >标签< br > <标识> <input type="radio" name="gender" value="female"> 女 < / >标签< br > <标识> <input type="radio" name="gender" value="other"> 其他 < / >标签< br > < input type = " submit " > > < /形式

这里是一个非常基本但现代的实现所需的单选按钮与原生HTML5验证:

fieldset { display: block; margin-left: 0; margin-right: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; border: none; } 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> <fieldset> <legend>Gender</legend> <div class="checkboxes"> <label for="male"><input id="male" type="radio" name="gender" value="male" class="hidden" required="required"><span>Male</span></label> <label for="female"><input id="female" type="radio" name="gender" value="female" class="hidden" required="required"><span>Female </span></label> <label for="other"><input id="other" type="radio" name="gender" value="other" class="hidden" required="required"><span>Other</span></label> </div> </fieldset> <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.

您可以使用此代码片段…

<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。

https://css-tricks.com/almanac/selectors/r/required/