Tôi chỉ tự hỏi làm thế nào để sử dụng thuộc tính đầu vào HTML5 mới "bắt buộc" theo đúng cách trên các nút radio. Có phải mọi trường nút radio đều cần thuộc tính như bên dưới hoặc là đủ nếu chỉ một trường có được nó?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />Câu trả lời:
TL; DR: Đặt requiredthuộc tính cho ít nhất một đầu vào của nhóm radio.
Cài đặt requiredcho tất cả các đầu vào rõ ràng hơn, nhưng không cần thiết (trừ khi tự động tạo các nút radio).
Để nhóm các nút radio, tất cả chúng phải có cùng namegiá trị. Điều này chỉ cho phép một người được chọn tại một thời điểm và áp dụng requiredcho cả nhóm.
<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>Cũng lưu ý về:
Để tránh nhầm lẫn về việc có cần một nhóm nút radio hay không, các tác giả được khuyến khích chỉ định thuộc tính trên tất cả các nút radio trong một nhóm. Thật vậy, nói chung, các tác giả được khuyến khích tránh có các nhóm nút radio không có bất kỳ điều khiển nào được kiểm tra ban đầu, vì đây là trạng thái mà người dùng không thể quay lại và do đó thường bị coi là giao diện người dùng kém.
Bạn có thể sử dụng đoạn mã này ...
<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>Chỉ định từ khóa " bắt buộc " trong một trong các câu lệnh chọn . Nếu bạn muốn thay đổi cách xuất hiện mặc định của nó. Bạn có thể làm theo các bước sau. Đây chỉ là thông tin bổ sung nếu bạn có ý định sửa đổi hành vi mặc định.
Thêm các mục sau vào .csstập tin của bạn .
/* style all elements with a required attribute */
:required {
background: red;
}Để biết thêm thông tin bạn có thể tham khảo URL sau.
Nếu các nút radio của bạn đã được tùy chỉnh, ví dụ biểu tượng gốc cho nút radio đã bị ẩn qua css display:noneđể bạn có thể tạo nút radio của riêng mình thì bạn có thể sẽ gặp lỗi.
Cách khắc phục là thay thế display:none bằngopacity:0
display:none. Điều đó đã được trả lời ở đây: stackoverflow.com/questions/49687229/
Dưới đây là một triển khai rất cơ bản nhưng hiện đại của các radiobutton cần thiết với xác thực HTML5 gốc:
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="other" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>Mặc dù tôi là một fan hâm mộ lớn của phương pháp tối giản trong việc sử dụng xác thực HTML5 gốc, bạn có thể muốn thay thế nó bằng xác thực Javascript về lâu dài. Xác thực Javascript cho phép bạn kiểm soát nhiều hơn quá trình xác thực và nó cho phép bạn đặt các lớp thực (thay vì các lớp giả) để cải thiện kiểu dáng của các trường hợp lệ (trong). Xác thực HTML5 gốc này có thể là dự phòng của bạn trong trường hợp Javascript bị hỏng (hoặc thiếu). Bạn có thể tìm thấy một ví dụ về điều đó ở đây , cùng với một số gợi ý khác về cách tạo ra các hình thức Tốt hơn , lấy cảm hứng từ Andrew Cole .
Tôi đã phải sử dụng required="required"cùng với tên và loại hơn xác nhận hoạt động tốt.
input type="radio" name="userradio" id="" value="User" required="required"
input type="radio" name="userradio" id="" value="Admin"
input type="radio" name="userradio" id="" value="Guest"