HTML Tag: select

Thẻ select dùng để tạo một danh sách dạng xổ xuống với nhiều giá trị khác nhau.

Cách sử dụng thẻ select

Ví dụ: Hiển thị danh sách tác giả freetuts.net

<select id="author_id" name="author_name">
    <option value="cuong">Nguyễn Văn Cường</option>
    <option value="minh">Hoài Minh</option>
    <option value="chipheo">Chí Phèo</option>
</select>

Kết quả: XEM DEMO

Bên trong thẻ select có nhiều giá trị và mỗi giá trị được đặt trong cặp thẻ option, khi người dùng chọn option nào thì giá trị của select chính là giá trị của option đó, còn chữ hiển thị mà bạn thấy ta gọi là nhãn (label). Như ở ví dụ trên nếu mình chọn option "Nguyễn Văn Cường" thì giá trị của select ở phía server nhận được sẽ là "cuong".

Thuộc tính multiple của thẻ select

Bình thường bạn chỉ chọn được một giá trị trong thẻ select, nhưng nếu bạn muốn người dùng có thể chọn nhiều giá trị thì có thể sử dụng thuộc tính multiple.

Ví dụ: Nhấn shift hoặc bôi chuột để chọn nhiều giá trị.

<select id="author_id" name="author_name" multiple>
    <option value="cuong">Nguyễn Văn Cường</option>
    <option value="minh">Hoài Minh</option>
    <option value="chipheo">Chí Phèo</option>
</select>

Kết quả: XEM DEMO

Trình duyệt hỗ trợ:

  • Chrome
  • Firefox
  • IE
  • Safari
  • Opera

Nguồn: freetuts.net