我想知道如何正确地在单选按钮上使用新的HTML5输入属性"required"。每个单选按钮字段是否都需要像下面一样有这个属性,还是只有一个字段有它就足够了?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
我想知道如何正确地在单选按钮上使用新的HTML5输入属性"required"。每个单选按钮字段是否都需要像下面一样有这个属性,还是只有一个字段有它就足够了?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
TL;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>
同时还要注意:
为了避免混淆,需鼓励作者在单选按钮组中的所有单选按钮上指定是否需要必填属性。实际上,一般来说,应该避免没有任何初始选中控件的单选按钮组,因为这是用户无法返回的状态,通常被认为是糟糕的用户界面。
我必须同时使用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" />
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损坏(或缺乏)的情况下作为后备。您可以在此处找到一个示例,以及一些其他建议,如何制作更好的表单,灵感来源于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>
.css
文件中。/* style all elements with a required attribute */
:required {
background: red;
}
更多信息,请参考以下网址。
https://css-tricks.com/almanac/selectors/r/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>