Phần tử <optgroup> trong HTML được dùng để nhóm các tùy chọn (options) trong một danh sách thả xuống (drop-down list). Ví dụ, bạn có thể đã thấy các mục danh sách được nhóm, ví dụ: khóa đại học và sau đại học hiển thị trong các nhóm khác nhau trong một danh sách thả xuống đơn lẻ.
Các thuộc tính đi kèm:
- disabled: Chỉ định một nhóm tùy chọn nên bị vô hiệu hóa
- label: Chỉ định nhãn (label) cho một nhóm tùy chọn
Ví dụ
<!DOCTYPE html> <html> <body> <h2>Trình độ học vấn</h2> <select> <optgroup label="Đại học"> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </optgroup> <optgroup label="Sau đại học"> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech">M.TECH</option> <option value="msc">M.Sc</option> </optgroup> </select> </body> </html>
Kết quả
Trong ví dụ trên, chúng ta có hai optgroup để đặt danh sách thả xuống với hai phần. Cách này giúp nhóm các tùy chọn trong danh sách thả xuống:
<select> <optgroup label="Đại học"> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </optgroup> <optgroup label="Sau đại học"> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech">M.TECH</option> <option value="msc">M.Sc</option> </optgroup> </select>
Phần tử option được dùng để đặt các tùy chọn khác nhau cho danh sách thả xuống và cho phép người dùng chọn bất kỳ cái nào từ một optgroup đơn lẻ:
<option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option>