Thuộc tính required của phần tử <select> dùng để báo cho người dùng biết rằng danh sách thả xuống <select> là bắt buộc và cần được chọn trước khi form được gửi. Nếu bạn không chọn giá trị từ danh sách thả xuống và cố gắng gửi form, form sẽ không gửi và một cảnh báo sẽ hiển thị trên trang web. Thuộc tính required được giới thiệu trong HTML5.
Cú pháp:
<select required>
Ví dụ
<!DOCTYPE html> <html> <body> <h1>Hồ sơ ứng viên</h1> <p>Dưới đây là chi tiết cần nộp bởi ứng viên:</p> <h2>Trình độ học vấn</h2> <form action=""> <section> <h3>Đại học</h3> <select required> <option value="">Không chọn</option> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </select> </section> <section> <h3>Sau đại học</h3> <select> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech">M.TECH</option> <option value="msc">M.Sc</option> </select> </section><br> <input type="submit" value="Tiếp theo"> </form> </body> </html>
Điều này sẽ tạo ra kết quả sau. Chúng ta chưa chọn mục từ danh sách thả xuống được đặt required, do đó cảnh báo sau sẽ hiển thị:
Trong ví dụ trên, chúng ta đã đặt hai danh sách thả xuống bằng <select>:
<section> <h3>Đại học</h3> <select required> <option value="">Không chọn</option> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </select> </section> <section> <h3>Sau đại học</h3> <select> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech">M.TECH</option> <option value="msc">M.Sc</option> </select> </section>
Chúng ta đã đặt một trong số đó bắt buộc phải chọn bởi người dùng bằng thuộc tính required, ngược lại form sẽ không gửi:
<section> <h3>Đại học</h3> <select required> <option value="">Không chọn</option> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </select> </section>