Thẻ <select> HTML

Định nghĩa và cách sử dụng

<select> Phần tử được sử dụng để tạo danh sách rơi.

<select> Phần tử thường được sử dụng trong biểu mẫu để thu thập đầu vào của người dùng.

Sau khi gửi biểu mẫu, cần thuộc tính name để tham chiếu dữ liệu biểu mẫu (nếu bỏ qua thuộc tính name, dữ liệu trong danh sách rơi sẽ không được gửi).

<select> Trong phần tử Thẻ <option> Định nghĩa các lựa chọn khả dụng trong danh sách rơi.

Cần sử dụng thuộc tính id để liên kết danh sách rơi với thẻ (label).

Lưu ý:Luôn thêm <label> thẻ Để có các thực hành khả năng truy cập tốt nhất!

Xin xem thêm:

Tài liệu tham khảo HTML DOM:Đối tượng Select

Giáo trình CSS:Cài đặt phong cách biểu mẫu

Mô hình

Ví dụ 1

Tạo danh sách rơi chứa bốn lựa chọn:

<label for="cars">Vui lòng chọn thương hiệu ô tô:</label>
<select name="cars" id="cars">
  <option value="audi">Audi</option>
  <option value="byd">BYD</option>
  <option value="geely">Geely</option>
  <option value="volvo">Volvo</option>
</select>

Thử ngay

Ví dụ 1

Ví dụ 2 <select> Sử dụng cùng với thẻ <optgroup>:

<label for="cars">Vui lòng chọn thương hiệu ô tô:</label>
<select  name="cars" id="cars">
  <optgroup label="Xe Trung Quốc">
    <option value="byd">BYD</option>
    <option value="geely">Geely</option>
  </optgroup>
  <optgroup label="Xe Đức">
    <option value="mercedes">Benz</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Thử ngay

Thuộc tính

Thuộc tính Giá trị Mô tả
autofocus autofocus Điều chỉnh danh sách rơi nên tự động nhận được sự tập trung khi trang được tải.
disabled disabled Điều chỉnh nên tắt danh sách rơi.
form ID biểu mẫu Định nghĩa danh sách rơi thuộc biểu mẫu.
multiple multiple Điều chỉnh có thể chọn nhiều lựa chọn cùng một lúc.
name Tên Định nghĩa tên của danh sách thả xuống.
required required Định nghĩa rằng người dùng phải chọn một giá trị trước khi gửi biểu mẫu.
size Số Định nghĩa số lượng mục nhìn thấy trong danh sách thả xuống.

Thuộc tính toàn cục

<select> Thẻ cũng hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<select> Thẻ cũng hỗ trợ Thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Không có.

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ