设置Java required属性_HTML5：如何将“required”属性与“radio”输入字段一起使用...

这是一个非常基本但现代的必需radiobuttons实现，具有原生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;}

Name (optional)

Gender

Male

Female

Other

虽然我是使用本机HTML5验证的简约方法的忠实粉丝，但您可能希望从长远来看用Javascript验证替换它 . Javascript验证使您可以更好地控制验证过程，它允许您设置实际类(而不是伪类)以改进(有效)字段的样式 . 如果Javascript损坏(或缺少)，这种本机HTML5验证可以是您的后备 . 你可以找到here的一个例子，以及关于如何制作Better forms的一些其他建议，灵感来自Andrew Cole .