Nhiều lựa chọn và danh sách

5.1 Phần tử <select>

Các phần tử <select>, <option> và <optgroup> được sử dụng để tạo danh sách thả xuống và danh sách có nhiều lựa chọn trong các form HTML. Nhờ có những phần tử này, người dùng có thể chọn một hoặc nhiều tùy chọn từ bộ giá trị được xác định trước.

Phần tử <select> được dùng để tạo danh sách thả xuống. Nó chứa một hoặc nhiều phần tử <option>, đại diện cho các tùy chọn có sẵn để lựa chọn.

Ví dụ sử dụng:

    
      <label for="country">Choose a country:</label>
      <select id="country" name="country">
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="mx">Mexico</option>
      </select>
    
  

Các thuộc tính chính của <select>

Thuộc tính name: thiết lập tên của phần tử form sẽ được gửi lên server cùng với giá trị đã chọn.

    
      <select name="country"></select>
    
  

Thuộc tính id: thiết lập định danh duy nhất cho phần tử, dùng để liên kết với phần tử <label>.

    
      <select id="country" name="country"></select>
    
  

Thuộc tính multiple: cho phép người dùng chọn nhiều tùy chọn cùng lúc. Ngoài ra, danh sách sẽ hiển thị như một danh sách nhiều dòng.

    
      <select name="fruits" id="fruits" multiple>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="cherry">Cherry</option>
      </select>
    
  

Thuộc tính size: thiết lập số dòng hiển thị trong danh sách thả xuống. Điều này hữu ích khi tạo danh sách có khả năng cuộn.

    
      <select name="cities" size="4">
        <option value="ny">New York</option>
        <option value="la">Los Angeles</option>
        <option value="chicago">Houston</option>
      </select>
    
  

5.2 Phần tử <option>

Phần tử <option> được sử dụng bên trong <select> để xác định từng tùy chọn mà người dùng có thể chọn.

Ví dụ sử dụng:

    
      <select name="color">
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
      </select>
    
  

Các thuộc tính chính của <option>:

Thuộc tính value: thiết lập giá trị sẽ được gửi lên server nếu tùy chọn này được chọn.

    
      <option value="red">Red</option>
    
  

Thuộc tính selected: xác định xem tùy chọn này có nên được chọn mặc định hay không.

    
      <option value="green" selected>Green</option>
    
  

Thuộc tính disabled: làm cho tùy chọn này không thể chọn được.

    
      <option value="blue" disabled>Blue</option>
    
  

5.3 Phần tử <optgroup>

Phần tử <optgroup> được dùng để nhóm các tùy chọn liên quan bên trong phần tử <select>. Nó cho phép chia tùy chọn thành các loại, làm cho danh sách thả xuống được tổ chức và dễ hiểu hơn.

Ví dụ sử dụng:

    
      <select name="car">
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Japanese Cars">
          <option value="toyota">Toyota</option>
          <option value="honda">Honda</option>
          <option value="nissan">Nissan</option>
        </optgroup>
      </select>
    
  

Các thuộc tính chính của <optgroup>:

Thuộc tính label: thiết lập tiêu đề cho nhóm tùy chọn.

    
      <optgroup label="German Cars"></optgroup>
    
  

Thuộc tính disabled: làm cho tất cả các tùy chọn trong nhóm này không thể chọn được.

    
      <select name="car">
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Japanese Cars" disabled>
          <option value="toyota">Toyota</option>
          <option value="honda">Honda</option>
          <option value="nissan">Nissan</option>
        </optgroup>
      </select>
    
  

Mẹo hữu ích khi sử dụng <select>, <option> và <optgroup>

1. Nhóm hợp lý: sử dụng <optgroup> để nhóm hợp lý các tùy chọn liên quan: điều này sẽ làm cho form tiện lợi hơn cho người dùng.
2. Nhiều lựa chọn: nếu cần cho phép người dùng chọn nhiều tùy chọn, hãy sử dụng thuộc tính multiple cho <select>.
3. Khả năng truy cập: sử dụng các thuộc tính id và label để cải thiện khả năng truy cập của các phần tử form. Việc sử dụng label đúng cách giúp cải thiện tương tác form cho mọi người dùng, bao gồm cả những người sử dụng công nghệ hỗ trợ.
4. Trang trí: sử dụng CSS để cải thiện giao diện của danh sách thả xuống và danh sách có nhiều lựa chọn. Ví dụ:

    
      select {
        width: 200px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }