Thẻ select trong HTML

Trong bài này chúng ta sẽ tìm hiểu cách sử dụng thẻ select trong HTML, đây là thẻ dùng để tạo combobox rất hay.

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. Người dùng chỉ có thể chọn một trong số những giá trị đó.

1. Cách sử dụng thẻ select

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

<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>

Bài viết này được đăng tại [kiso.vn]

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”.

2. 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>

Trình duyệt hỗ trợ:

• Chrome
• Firefox
• IE
• Safari
• Opera

3. Các sự kiện thường dùng trong thẻ select

Đây là một thẻ đặc biệt, thường được dùng để lấy thông tin từ người dùng. Vì vậy, bạn có thể sử dụng những sự kiện thường gặp trong form như:

• onchange
• onclick
• onblur
• hover
• …

Sau này khi học sang Javascript thì bạn sẽ có cơ hội tìm hiểu kỹ hơn.