Thẻ <select> và <option> – tạo menu chọn (dropdown)

Cập nhật Tháng 8 18, 2025

Khi bạn cần cho người dùng chọn một giá trị duy nhất trong nhiều lựa chọn, HTML cung cấp thẻ <select> để tạo menu xổ xuống, kết hợp với các thẻ <option> để hiển thị các lựa chọn.

1. Cú pháp cơ bản

<select name="quocgia">
  <option value="vn">Việt Nam</option>
  <option value="us">Hoa Kỳ</option>
  <option value="jp">Nhật Bản</option>
</select>

Thẻ <select> bao quanh nhiều thẻ <option>.
Mỗi <option> có thể có value (giá trị sẽ gửi đi khi form được submit).
Văn bản bên trong <option> là nội dung hiển thị cho người dùng.

2. Thuộc tính quan trọng

Thuộc tính	Áp dụng cho	Tác dụng
`name`	`<select>`	Tên của trường khi gửi dữ liệu
`value`	`<option>`	Giá trị được gửi đi
`selected`	`<option>`	Được chọn sẵn
`disabled`	`<option>`	Không cho chọn
`multiple`	`<select>`	Cho phép chọn nhiều (dùng kết hợp với Ctrl hoặc Shift)

3. Ví dụ đầy đủ

<p>Chọn quốc gia:</p>
<select name="quocgia">
  <option value="vn" selected>Việt Nam</option>
  <option value="us">Hoa Kỳ</option>
  <option value="jp">Nhật Bản</option>
  <option value="fr" disabled>Pháp (tạm thời ẩn)</option>
</select>

4. Ví dụ với `multiple`

<p>Chọn các môn yêu thích:</p>
<select name="monhoc[]" multiple size="4">
  <option value="toan">Toán</option>
  <option value="ly">Lý</option>
  <option value="hoa">Hoá</option>
  <option value="van">Văn</option>
</select>

Lưu ý: Để gửi được nhiều giá trị khi dùng multiple, name phải có dấu [] như name="monhoc[]".

5. Thực hành

Tạo file form-select.html và thêm nội dung:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Thẻ select và option</title>
</head>
<body>
  <h1>Form chọn quốc gia</h1>

  <form action="#" method="post">
    <p>
      Quốc gia:<br>
      <select name="quocgia">
        <option value="vn" selected>Việt Nam</option>
        <option value="us">Hoa Kỳ</option>
        <option value="jp">Nhật Bản</option>
      </select>
    </p>

    <p>
      Môn học yêu thích:<br>
      <select name="monhoc[]" multiple size="4">
        <option value="toan">Toán</option>
        <option value="ly">Lý</option>
        <option value="hoa">Hoá</option>
        <option value="van">Văn</option>
      </select>
    </p>

    <p>
      <button type="submit">Gửi</button>
    </p>
  </form>
</body>
</html>

6. Ghi nhớ

<select> tạo menu chọn.
<option> là từng lựa chọn trong menu.
Dùng selected để chọn sẵn, multiple để cho phép chọn nhiều.

Bài trước ← Thuộc tính cho input – required, placeholder, value, checked Bài tiếp theo Thẻ <label> và kết nối với input – cải thiện trải nghiệm người dùng →

🔗 Bài viết khác trong chuyên mục:

📂 Chuyên mục:

HTML: Phần 2

Thảo luận

Hủy

🔒 Bạn phải đăng nhập để gửi bình luận.