HTML5: Cách sử dụng thuộc tính "bắt buộc" với trường nhập "radio"

Question

Tôi chỉ tự hỏi cách sử dụng thuộc tính đầu vào HTML5 mới "bắt buộc" đúng cách trên radiobuttons. Mỗi trường vô tuyến có cần thuộc tính như dưới đây không? Hoặc là nó đủ nếu chỉ có một trường nhận được nó?

<input type="radio" name="color" value="black" required="required" /> 
<input type="radio" name="color" value="white" required="required" /> 

Answer 1

Đặt thuộc tính required cho ít nhất một đầu vào của nhóm radio.

---

Thiết required cho tất cả nguyên liệu đầu vào là rõ ràng hơn, nhưng không cần thiết (trừ trường hợp tự động tạo ra đài phát thanh-nút).

Để nhóm các nút radio, tất cả chúng phải có cùng giá trị name. Đ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 required cho toàn bộ nhóm.

<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>

Cũng lưu ý:

Để tránh nhầm lẫn về việc liệu một nhóm nút radio được yêu cầu hay không, tác giả được khuyến khích để xác định các thuộc tính trên tất cả các đài phát thanh các nút 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 nhóm nút radio không có bất kỳ điều khiển được kiểm tra ban đầu nào vì đây là trạng thái mà người dùng không thể quay lại và do đó thường được coi là giao diện người dùng kém.

Source

Answer 2

thử này ...

<form> 
     <input type="radio" name="color" value="black" required /> 
     <input type="radio" name="color" value="white" /> 

     <input type="submit" value="Click Here" /> 
</form> 

Find JSFIDDLE

Answer 3

Nếu nút radio của bạn đã được tùy chỉnh, ví dụ như các biểu tượng ban đầu cho nút radio đã được ẩn qua css display:none để bạn có thể tạo nút radio của riêng mình thì có thể bạn sẽ gặp lỗi.

Cách để sửa chữa nó là để thay thế display:none với opacity:0