Sử dụng thẻ select và option

Giới thiệu

Thẻ <select> được sử dụng chung với thẻ <option> để tạo một danh sách drop-down hoặc list, cho phép chọn một hoặc nhiều hạng mục từ một danh sách có sẵn.

Chúng ta cùng phân biệt giữa một số điều khiển:

checkbox: lựa chọn nhiều hạng mục từ một danh sách
radio: lựa chọn một hạng mục từ một danh sách. Hiển thị toàn bộ danh sách cho người dùng thấy ngay từ đầu. Sử dụng tốt trong trường hợp có ít lựa chọn.
drop-down: lựa chọn một hạng mục từ một danh sách. Chỉ hiển thị hạng mục hiện tại được chọn, còn lại các hạng mục khác đều bị ẩn. Toàn bộ danh sách chỉ hiển thị khi người dùng click chuột vào.
list: lựa chọn nhiều hạng mục từ một danh sách.

Ví dụ:

Lựa chọn một thành phố từ drop-down:

<select name="city">
  <option value="HN">Hà Nội</option>
  <option value="HP">Hải Phòng</option>
  <option value="HU">Huế</option>
  <option value="DN">Đà Nẵng</option>
  <option value="SG">Sài Gòn</option>
</select>

Lựa chọn nhiều thành phố từ list:

<select name="city" multiple>
  <option value="HN">Hà Nội</option>
  <option value="HP">Hải Phòng</option>
  <option value="HU">Huế</option>
  <option value="DN">Đà Nẵng</option>
  <option value="SG">Sài Gòn</option>
</select>

Lưu ý: Sử dụng thuộc tính multiple để cho phép chọn nhiều.