Thẻ <select> tạo dropdown list, kết hợp <option> cho các lựa chọn. Dùng trong form để người dùng chọn 1 hoặc nhiều giá trị.
Thuộc tính <select>
| Thuộc tính | Mô tả |
|---|---|
| name | Tên control, gửi lên server cùng giá trị |
| size | Số option hiển thị (mặc định 1 = dropdown), >1 = list box |
| multiple | Cho phép chọn nhiều (Ctrl/Cmd + click) |
| disabled | Vô hiệu hóa control |
| required | Bắt buộc chọn (HTML5 validation) |
| autofocus | Tự focus khi load trang |
Thuộc tính <option>
| Thuộc tính | Mô tả |
|---|---|
| value | Giá trị gửi lên server (khác text hiển thị) |
| selected | Mặc định được chọn khi load |
| disabled | Vô hiệu hóa option này |
| label | Text hiển thị thay cho nội dung (ít dùng) |
Ví dụ cơ bản
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
<style>
body { font-family: 'Segoe UI', sans-serif; padding: 20px; }
select { padding: 8px 12px; font-size: 16px; border-radius: 4px; border: 1px solid #ccc; }
</style>
</head>
<body>
<p>Chọn môn học:</p>
<form>
<select name="dropdown">
<option value="computer-architecture" selected>Kiến trúc máy tính</option>
<option value="java">Java</option>
<option value="discrete-math">Toán rời rạc</option>
</select>
</form>
</body>
</html>
Ví dụ nâng cao
<!-- Optgroup: nhóm option -->
<select name="subject">
<optgroup label="Lập trình">
<option value="js">JavaScript</option>
<option value="ts">TypeScript</option>
</optgroup>
<optgroup label="Cơ sở dữ liệu">
<option value="sql">SQL</option>
<option value="nosql">NoSQL</option>
</optgroup>
</select>
<!-- Multiple select -->
<select name="skills" multiple size="5">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js" selected>JavaScript</option>
<option value="react">React</option>
<option value="node">Node.js</option>
</select>
Tùy chỉnh giao diện (Custom Select)
<select> khó style cross-browser. Cách phổ biến: ẩn select, tạo custom dropdown với <div> + JS, hoặc dùng thư viện (Choices.js, Select2, Tom Select).