Ôn tập: biểu mẫu #1

Thuộc phần Kiến thức cơ bản trong hành trình HTML của Coddy. Bài học 46 trên 60.

Thử thách

Dễ

Hãy tạo một biểu mẫu đặt đồ uống đơn giản bằng HTML như hình bên dưới.

Biểu mẫu cần có các phần sau:

Một thẻ <form> để bao bọc tất cả.
Một nhóm nút radio (name: "drink") để người dùng chọn đồ uống. Nhãn là "Water", "Coke" hoặc "Sprite".
Một nhóm ô chọn (name: "extras") dành cho các món thêm tùy chọn. Nhãn là "Ice", "Lemon" hoặc "Sugar".
Một menu thả xuống (name: "size") để chọn kích cỡ đồ uống. Các tùy chọn là "Small", "Medium" hoặc "Large".
Một nút gửi có nhãn "Place Order".
Một nút đặt lại có nhãn "Clear".

⚠️ Quan trọng: Chỉ dùng một thẻ <form>. HTML không cho phép lồng các thẻ <form>: đặt một thẻ <form> bên trong một thẻ <form> khác là không hợp lệ, khiến các trường đầu vào bị nhận diện là nằm ngoài biểu mẫu và làm hỏng các bài kiểm tra. Đặt tất cả nút radio, ô chọn, menu thả xuống và nút trực tiếp bên trong thẻ <form> bên ngoài duy nhất: không bao bọc các phần bằng thẻ <form> bổ sung.

Tự làm thử

<!DOCTYPE html>
<html>
    <body>
        <form>
            <p>Select a drink: </p>
            <!-- Viết code ở đây -->
            
            <p>Select extras: </p>
            <!-- Viết code ở đây -->
            
            <p>Select size: </p>
            <!-- Viết code ở đây -->
            
        </form>
    </body>
</html>