Danh sách thả xuống
Thuộc phần Kiến thức cơ bản trong hành trình HTML của Coddy. Bài học 43 trên 60.
Trong HTML, menu thả xuống là danh sách các mục xuất hiện khi người dùng nhấp vào hoặc di chuột qua một phần tử. Menu thả xuống thường được dùng để trình bày danh sách lựa chọn một cách gọn gàng. Để tạo menu thả xuống, bạn dùng thẻ <select> cùng với các thẻ <option> cho từng mục.
Đây là cú pháp cơ bản để tạo danh sách thả xuống trong HTML:
<select name="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select><select>: Thẻ xác định menu thả xuống.
name: Thuộc tính đặt tên cho danh sách thả xuống, dùng để xác định giá trị đã chọn khi biểu mẫu được gửi.
<option>: Thẻ xác định một mục trong danh sách thả xuống.
value: Thuộc tính chỉ định giá trị gắn với tùy chọn. Giá trị này được gửi đến máy chủ khi biểu mẫu được gửi.
Option text: Văn bản hiển thị trong danh sách thả xuống cho mỗi tùy chọn.
Đây là ví dụ về cách tạo danh sách thả xuống có ba tùy chọn:
<select name="colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>Trong ví dụ này, chúng ta có một danh sách thả xuống có tên "colors" và ba tùy chọn: Red, Green và Blue.
Thử thách
DễTạo một tài liệu HTML có biểu mẫu với menu thả xuống. Biểu mẫu cần có các phần tử sau:
- Menu thả xuống có tên "fruits".
- Menu thả xuống có bốn tùy chọn với giá trị và văn bản sau:
- Giá trị: "apple", Văn bản: "Apple"
- Giá trị: "banana", Văn bản: "Banana"
- Giá trị: "orange", Văn bản: "Orange"
- Giá trị: "grape", Văn bản: "Grape"
Tự làm thử
<!DOCTYPE html>
<html>
<body>
<!-- Viết code ở đây -->
</body>
</html>Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
Tất cả bài học trong Kiến thức cơ bản
1Kiến thức cơ bản về HTML
HTML là gì?Cấu trúc cơ bản của HTMLThẻ và phần tửThẻ lồng nhau và thẻ đóngChú thích trong HTML2Văn bản và định dạng
Tiêu đềĐoạn vănNgắt dòngChữ đậm và chữ nghiêngLại chữ đậm và chữ nghiêngÔn tập: định dạng8Biểu mẫu và đầu vào phần 1
Kiến thức cơ bản về biểu mẫuÔ nhập văn bảnThuộc tính của ô nhậpTrường mật khẩuNhãn cho ô nhậpÔn tập: biểu mẫu cơ bản11Trang đăng ký sự kiện
Tổng quan dự ánPhần đầu trang3Làm việc với danh sách
Danh sách không có thứ tựDanh sách có thứ tựDanh sách lồng nhauÔn tập: danh sách9Biểu mẫu và đầu vào phần 2
Nút radioHộp kiểmDanh sách thả xuốngNútNút trong biểu mẫuÔn tập: biểu mẫu #1Ôn tập: biểu mẫu #2Tự luyện tập: Playground Web