Khái niệm

Tag <optgroup> trong HTML được sử dụng để nhóm các tùy chọn trong một phần tử <select>. Nó cho phép bạn tạo ra các nhóm tùy chọn liên quan với nhau, giúp người dùng dễ dàng tìm và chọn tùy chọn phù hợp.

Cách sử dụng

Cú pháp

<select>
  <optgroup label="Nhóm 1">
    <option value="1">Tùy chọn 1</option>
    <option value="2">Tùy chọn 2</option>
  </optgroup>
  <optgroup label="Nhóm 2">
    <option value="3">Tùy chọn 3</option>
    <option value="4">Tùy chọn 4</option>
  </optgroup>
</select>

Trong đó:

• Phần tử <optgroup> được sử dụng để tạo ra một nhóm tùy chọn.
• Thuộc tính label được sử dụng để đặt tên cho nhóm tùy chọn.
• Mỗi phần tử <optgroup> có thể chứa nhiều phần tử <option> để tạo ra các tùy chọn trong nhóm.

Ví dụ:

<select>
  <optgroup label="Màu sắc">
    <option value="red">Đỏ</option>
    <option value="blue">Xanh</option>
  </optgroup>
  <optgroup label="Kích cỡ">
    <option value="small">Nhỏ</option>
    <option value="medium">Trung bình</option>
    <option value="large">Lớn</option>
  </optgroup>
</select>

Kết quả

Trong ví dụ này, chúng ta đã tạo hai nhóm tùy chọn: “Màu sắc” và “Kích cỡ”. Người dùng có thể chọn một tùy chọn từ mỗi nhóm.