ner*_*ess 370 html5 radio-button required
我只是想知道如何在radiobuttons上正确使用新的HTML5输入属性"required".每个radiobutton字段是否都需要如下所示的属性？或者只有一个领域得到它就足够了吗？
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
Sey*_*sen 622
设置required无线电组的至少一个输入的属性.
required所有输入的设置更清晰,但不是必需的(除非动态生成单选按钮).
要对单选按钮进行分组,它们必须具有相同的name值.这允许一次只选择一个并应用于required整个组.
<form>
Select Gender:
<label><input type="radio" name="gender" value="male" required>Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<label><input type="radio" name="gender" value="other">Other</label>
<input type="submit">
</form>另请注意:
为避免混淆是否需要单选按钮组,建议作者在组中的所有单选按钮上指定属性.实际上,一般来说,鼓励作者首先避免使用没有任何初始检查控件的单选按钮组,因为这是用户无法返回的状态,因此通常被认为是不良的用户界面.
以下是具有本机 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 验证使您可以更好地控制验证过程，并且允许您设置真实的类（而不是伪类）来改进（输入）有效字段的样式。如果 Javascript 损坏（或缺少），此原生 HTML5 验证可以作为您的后备方案。您可以在这里找到一个示例，以及受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/
小智 6
我必须使用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" />
| 归档时间： |
|
| 查看次数： |
366737 次 |
| 最近记录： |