HTML Select: Hướng dẫn tạo danh sách chọn

Thẻ HTML <select> tạo một danh sách cho phép người dùng chọn một hoặc nhiều tùy chọn. Thẻ <select> nên chứa một hoặc nhiều thẻ <option> đại diện cho các lựa chọn mà người dùng có thể chọn.

Hộp chọn (selection boxes) là một phần quan trọng của nhiều biểu mẫu web. Chúng cho phép bạn nhận dữ liệu đầu vào từ người dùng và giới hạn các tùy chọn mà người dùng có thể chọn trong những gì bạn đã chỉ định.

Thẻ HTML <select> tạo một phần tử biểu mẫu cung cấp danh sách các tùy chọn mà người dùng có thể chọn một hoặc nhiều. Phần tử <option> chỉ định các tùy chọn xuất hiện trong hộp chọn.

Hướng dẫn này sẽ thảo luận cách sử dụng thẻ HTML <select>. Chúng tôi sẽ tham khảo một ví dụ để giúp bạn bắt đầu sử dụng thẻ này.

Biểu mẫu HTML

Biểu mẫu là một phần thiết yếu của nhiều trang web, cho phép bạn chấp nhận dữ liệu từ người dùng để xử lý trên trang web của mình. Ví dụ, nếu bạn đang thiết kế trang web cho một quán cà phê, bạn có thể muốn tạo một biểu mẫu nhận phản hồi từ khách hàng.

Trong HTML, thẻ <form> được dùng để khai báo một biểu mẫu. Sau đó, bạn có thể sử dụng các phần tử HTML như <input> và select để xác định dữ liệu mà biểu mẫu sẽ thu thập. Trong hướng dẫn này, chúng tôi sẽ tập trung vào thẻ <select> và cách nó có thể được dùng để thu thập dữ liệu trong biểu mẫu.

Để tìm hiểu thêm về biểu mẫu HTML, hãy đọc hướng dẫn cho người mới bắt đầu về biểu mẫu HTML.

Thẻ HTML <select>

Thẻ HTML <select> tạo một danh sách từ đó người dùng có thể chọn một hoặc nhiều tùy chọn. Phần tử <option> quy định một tùy chọn riêng lẻ trong thẻ <select>.

Thẻ <select> tạo một trường biểu mẫu mà khi được nhấp chuột, hiển thị một danh sách thả xuống (drop-down list) với các tùy chọn để người dùng chọn.

Cú pháp cho thẻ <select> như sau:

<select></select>

Đơn lẻ, thẻ <select> không có tùy chọn nào. Chúng ta cần sử dụng thẻ <option> để xác định các tùy chọn xuất hiện trong thẻ <select>.

Cú pháp cho thẻ <option>:

<select>
  <option value="optionOne">Tùy chọn Một</option>
</select>

Thẻ <option> xuất hiện bên trong thẻ <select>. Trong ví dụ này, chúng tôi cũng chỉ định thuộc tính value với thẻ <select>.

Điều này được dùng để lưu trữ giá trị dữ liệu sẽ được gửi đến máy chủ nếu người dùng chọn một tùy chọn cụ thể. Trong trường hợp này, nếu người dùng chọn Tùy chọn Một từ danh sách, optionOne sẽ được gửi đến máy chủ.

Mỗi thẻ <option> nên có thuộc tính value được chỉ định.

Thẻ HTML <select> được hỗ trợ bởi tất cả các trình duyệt hiện đại chính.

Tại sao nên sử dụng thẻ HTML <select>?

Việc sử dụng thẻ <select> có lợi khi bạn muốn giới hạn các giá trị mà người dùng có thể nhập vào trường biểu mẫu. Dưới đây là một vài ví dụ nơi thẻ <select> có thể hữu ích:

• Cung cấp danh sách các quốc gia để người dùng chọn.
• Cho người dùng danh sách các màu có sẵn cho sản phẩm để chọn.
• Cho phép người dùng chọn số lượng sản phẩm họ muốn mua (ví dụ: từ 1 đến 10).

Trong các trường hợp này, các tùy chọn là có hạn. Sử dụng menu thả xuống nghĩa là bạn có thể nhận được phản hồi phù hợp với mã của mình. Điều này là vì người dùng không thể nhập bất kỳ giá trị nào họ muốn, như họ có thể làm trên trường chọn (select field), mà bạn có thể không dự đoán được.

Ví dụ HTML <select>

Giả sử chúng ta đang tạo một biểu mẫu web cho một tiệm bánh mì địa phương. Chúng ta đã được yêu cầu tạo một biểu mẫu cho phép người dùng đặt bánh mì. Biểu mẫu này nên trình bày một danh sách thả xuống các loại bánh mì từ đó người dùng có thể chọn. Các tùy chọn cần xuất hiện là:

• Trắng thường
• Nâu thường
• Nguyên cám
• Sourdough

Mặc định, Trắng thường nên được chọn.

Để tạo menu thả xuống HTML này, chúng ta có thể sử dụng mã sau:

<select name="breadType">
  <option value="plainWhite" selected>Trắng thường</option>
  <option value="plainBrown">Nâu thường</option>
  <option value="wholeGrain">Nguyên cám</option>
  <option value="sourdough">Sourdough</option>
</select>

Mã của chúng ta trả về:

Đầu tiên, chúng ta sử dụng thẻ <select> để định nghĩa danh sách chọn. Chúng ta chỉ định thuộc tính name, xác định tên của điều khiển biểu mẫu select, và gán giá trị breadType cho thuộc tính này.

Tiếp theo, chúng ta sử dụng bốn thẻ <option> để tạo danh sách các tùy chọn được trình bày cho người dùng. Mỗi thẻ <option> này có thuộc tính value được chỉ định. Thuộc tính này lưu trữ giá trị của tùy chọn sẽ được gửi đến máy chủ khi người dùng gửi biểu mẫu.

Thẻ <option> đầu tiên, có văn bản nhãn hiển thị Trắng thường, cũng có thuộc tính selected được chỉ định. Điều này làm cho Trắng thường trở thành tùy chọn được chọn mặc định.

Chúng ta có thể cho phép người dùng chọn nhiều tùy chọn trong danh sách bằng cách sử dụng thuộc tính multiple:

<select name="breadType" multiple>
  <option value="plainWhite" selected>Trắng thường</option>
  <option value="plainBrown">Nâu thường</option>
  <option value="wholeGrain">Nguyên cám</option>
  <option value="sourdough">Sourdough</option>
</select>

Thuộc tính multiple là một từ khóa. Điều này nghĩa là bạn không cần dùng dấu bằng để gán giá trị cho thuộc tính.

Để chọn nhiều giá trị, hãy giữ phím Ctrl trên Windows hoặc phím Cmd trên Mac.

Các thuộc tính của thẻ HTML <select>

Thẻ <select> có một số thuộc tính HTML cụ thể có thể được áp dụng cho thẻ. Chúng như sau:

Kết luận

Phần tử HTML <select> tạo một trường biểu mẫu hiển thị danh sách các giá trị mặc định. Người dùng có thể chọn một hoặc nhiều giá trị từ danh sách. Các trường <select> hữu ích khi bạn muốn người dùng chọn một giá trị từ một danh sách các giá trị tiềm năng được xác định trước.

Hướng dẫn này đã thảo luận, tham khảo một ví dụ, cách bạn có thể sử dụng thẻ <select> để tạo một trường biểu mẫu danh sách thả xuống trong HTML.

Bạn muốn tìm hiểu thêm về lập trình HTML? Hãy xem hướng dẫn Cách học HTML của chúng tôi. Hướng dẫn này chứa các mẹo hàng đầu về cách học HTML và danh sách tài nguyên học tập để giúp bạn xây dựng kiến thức.