Khi form có nhiều lựa chọn (radio, checkbox), gom vào dropdown (<select>) giúp giao diện gọn gàng, trải nghiệm tốt hơn.
Bài viết hướng dẫn tạo dropdown form bằng <select> và <option>. (Dropdown navbar xem bài CSS Dropdowns).
Cấu Trúc Cơ Bản
<select> là container, <option> là các mục. Thuộc tính name và id quan trọng để xử lý dữ liệu.
<form>
<label for="teams">Chọn đội bóng:</label>
<select id="teams" name="teams">
<option value="">-- Chọn đội --</option>
<option value="arsenal">Arsenal</option>
<option value="chelsea">Chelsea</option>
<option value="liverpool">Liverpool</option>
</select>
<br><br>
<input type="submit" value="Gửi">
</form>
Giá trị value của <option> được gửi khi submit. Mục đầu tiên thường là placeholder.
Kết Luận
Dùng <select> và <option> để tạo dropdown form. Tiếp theo hãy tìm hiểu <optgroup> để nhóm các mục!