×

Cách sử dụng thẻ <optgroup> để nhóm tùy chọn trong HTML

Trong HTML, thẻ <optgroup> là một công cụ hữu ích để nhóm các tùy chọn (<option>) trong một danh sách thả xuống (<select>). Điều này không chỉ giúp cải thiện trải nghiệm người dùng bằng cách tạo sự gọn gàng và dễ dàng quản lý các mục, mà còn giúp lập trình viên dễ dàng quản lý và sắp xếp mã nguồn.

Định nghĩa và Cấu trúc

Thẻ <optgroup> được sử dụng để nhóm các lựa chọn liên quan với nhau. Cấu trúc cơ bản của nó bao gồm một thẻ mở <optgroup> và một thẻ đóng </optgroup>, với các thẻ <option> nằm ở giữa. Cú pháp cơ bản như sau:

<select>
  <optgroup label="Nhóm 1">
    <option value="1">Lựa chọn 1</option>
    <option value="2">Lựa chọn 2</option>
  </optgroup>
  <optgroup label="Nhóm 2">
    <option value="3">Lựa chọn 3</option>
    <option value="4">Lựa chọn 4</option>
  </optgroup>
</select>

Ở đây, thuộc tính label của thẻ <optgroup> được sử dụng để đặt tên cho nhóm tùy chọn, giúp người dùng dễ dàng nhận biết các nhóm khác nhau.

Thí dụ Cụ thể

Hãy xem xét một ví dụ cụ thể hơn để hiểu rõ cách sử dụng thẻ <optgroup>.

<form action="/submit">
  <label for="cars">Chọn loại xe:</label>
  <select id="cars" name="carlist">
    <optgroup label="Xe hơi">
      <option value="audi">Audi</option>
      <option value="bmw">BMW</option>
      <option value="mercedes">Mercedes</option>
    </optgroup>
    <optgroup label="Xe tải">
      <option value="ford">Ford</option>
      <option value="chevrolet">Chevrolet</option>
      <option value="toyota">Toyota</option>
    </optgroup>
  </select>
  <input type="submit" value="Submit">
</form>

Trong ví dụ này, "Xe hơi" và "Xe tải" là hai nhóm tùy chọn khác nhau. Người dùng có thể dễ dàng chọn loại xe yêu thích của họ mà không bị lẫn lộn.

Một số Lưu ý

  1. Khả năng Tiếp cận: Thẻ <optgroup> cải thiện khả năng tiếp cận cho người dùng, đặc biệt là những người sử dụng các công cụ hỗ trợ đọc màn hình.

  2. Không lồng nhau: Thẻ <optgroup> không được phép lồng bên trong nhau. Điều này có nghĩa là bạn không thể có một thẻ <optgroup> bên trong một thẻ <optgroup> khác.

  3. Thuộc tính khác: Ngoài thuộc tính label, thẻ <optgroup> còn hỗ trợ thuộc tính disabled, cho phép bạn vô hiệu hóa một nhóm tùy chọn.

<optgroup label="Xe hơi" disabled>
  <option value="audi">Audi</option>
  <option value="bmw">BMW</option>
</optgroup>

Trong đoạn mã trên, nhóm "Xe hơi" sẽ bị vô hiệu hóa và người dùng không thể chọn bất kỳ tùy chọn nào bên trong nhóm này.

Tầm Quan Trọng của Thẻ <optgroup>

Việc sử dụng thẻ <optgroup> không chỉ nâng cao trải nghiệm người dùng mà còn giúp mã nguồn của bạn trở nên sáng sủa và dễ quản lý hơn. Thẻ này thích hợp cho các danh sách dropdown dài và phức tạp, nơi việc nhóm các tùy chọn liên quan với nhau sẽ giúp người dùng tìm kiếm nhanh chóng và hiệu quả hơn.

Sử dụng thẻ <optgroup> là một phương pháp tốt để cải thiện cả tính thẩm mỹ và chức năng cho các biểu mẫu trên trang web của bạn. Chỉ cần một chút thời gian để cài đặt, bạn sẽ thấy sự khác biệt trong cách người dùng tương tác với trang web của mình.

Comments