TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個(gè)贊
設(shè)置required屬性，用于無線電組的至少一個(gè)輸入。
設(shè)置required對(duì)于所有輸入都比較清楚，但沒有必要(除非動(dòng)態(tài)生成單選按鈕)。
要對(duì)單選按鈕進(jìn)行分組，它們都必須具有相同的name價(jià)值。這允許一次只選擇一個(gè)并應(yīng)用required給整個(gè)團(tuán)隊(duì)。
<form>
Select Gender:
<label><input type="radio" name="gender" value="male" required>Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<input type="submit">
</form>
為了避免混淆是否需要單選按鈕組，鼓勵(lì)作者在組中的所有單選按鈕上指定屬性。實(shí)際上，通常鼓勵(lì)作者避免單選按鈕組，這些組最初沒有任何初始檢查控件，因?yàn)檫@是用戶無法返回的狀態(tài)，因此通常被認(rèn)為是一個(gè)糟糕的用戶界面。
TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超6個(gè)贊
display:none
display:noneopacity:0
TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超6個(gè)贊
下面是一個(gè)非?；镜F(xiàn)代的實(shí)現(xiàn)，它使用本機(jī)HTML 5驗(yàn)證來實(shí)現(xiàn)所需的無線電按鈕：
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>
<label>Gender</label>
<div class="checkboxes">
<label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
<label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
<label><input id="other" type="radio" name="gender" value="male" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>
舉報(bào)