如何使用&;required&;带有"radio"输入字段

我只是想知道如何在单选按钮上以正确的方式使用新的HTML5输入属性“required”。是否每个单选按钮字段都需要下面这样的属性，或者如果只有一个字段得到它就足够了?

<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
619762 次浏览
小开
最佳答案

DR:为无线电组的至少一个输入设置required属性。

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

要对单选按钮进行分组，它们必须具有相同的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>

还要注意:

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

Source .

小开

这里是一个非常基本但现代的实现所需的单选按钮与原生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>

尽管我是使用原生HTML5验证的极简方法的忠实粉丝，但从长远来看，您可能希望用Javascript验证来取代它。Javascript验证为您提供了对验证过程的更多控制，它允许您设置真实类(而不是伪类)来改进有效字段的样式。这种原生HTML5验证可以作为Javascript崩溃(或缺乏)时的备用方案。您可以找到在这里的示例，以及关于如何制作更好的形式的其他一些建议，灵感来自安德鲁•科尔。

小开

您可以使用此代码片段…

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

在其中之一语句中指定“要求”关键字。如果您想更改其外观的默认方式。您可以按照以下步骤进行操作。这只是额外的信息，如果你有任何打算修改默认行为。

将以下内容添加到.css文件中。

/* style all elements with a required attribute */
:required {
background: red;
}

欲了解更多信息，请参考以下URL。

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

小开

我必须使用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" />
小开 

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


提交答案