Giải chi tiết Khoa học máy tính 12 KNTT bài 12 Tạo biểu mẫu

KHỞI ĐỘNG

Để tham gia hội chợ ẩm thực ở trường, lớp em đã chọn một website để quảng cáo sản phẩm. Em hãy thảo luận và chọn loại phần tử HTML cần sử dụng để tạo đơn hàng trên website.

Bài làm chi tiết:

Có thể sử dụng các phần tử HTML như <form>, <input>, và <button>. để tạo đơn hàng trên website để quảng cáo sản phẩm trong hội chợ ẩm thực.

1. BIỂU MẪU WEB

Hoạt động 1: Tương tác bằng biểu mẫu web

Mô tả các bước mà em đã thực hiện khi đăng kí tài khoản trên một trang web nào đó.

Bài làm chi tiết:

 Nhập thông tin tài khoản:

- Nhập tên, địa chỉ email, số điện thoại, v.v.

- Nhập mật khẩu cho tài khoản, thông tin được che đi để bảo mật.

- Nhập lại mật khẩu.

- Xác thực thông tin tài khoản.

Câu hỏi 1: Điểm khác nhau giữa radio. Checkbox và select là gì?

Bài làm chi tiết:

- Radio và checkbox là các phần tử đầu vào (input) cho phép người dùng chọn giá trị từ danh sách tùy chọn, trong khi select tạo một danh sách thả xuống cho người dùng chọn giá trị. 

- Radio chỉ cho phép chọn một giá trị duy nhất, trong khi checkbox cho phép chọn nhiều giá trị và select cũng cho phép chọn một giá trị duy nhất từ danh sách thả xuống.

Câu hỏi 2: Hãy viết câu lệnh để thêm một nút có tên “Quên mật khẩu vào biểu mẫu.

Bài làm chi tiết:

Mã HTML:

Kết quả trả về:

LUYỆN TẬP

Lần lượt tạo các loại phần tử forn và các phần tử input với những loại dữ liệu khác nhau và liệt kê ra ba ví dụ có thể sử dụng của từng loại.

Bài làm chi tiết:

- Phần tử <form>:

- Phần tử <input> với loại dữ liệu "text":

- Phần tử <input> với loại dữ liệu "password":

- Phần tử <input> với loại dữ liệu "radio":

- Phần tử <input> với loại dữ liệu "checkbox":

- Phần tử <input> với loại dữ liệu "submit":

- Phần tử <input> với loại dữ liệu "file":

VẬN DỤNG

Câu 1: Tạo một biểu mẫu đăng kí thành viên câu lạc bộ.

Bài làm chi tiết:

Mã HTML:

Kết quả:

Câu 2: Sửa lại mã nguồn của trang web đã viết trong Nhiệm vụ 2, Bài 11 để thêm một liên kết cho cụm từ đăng kí. Khi nhát chuột vào liên kết, trang web đã việt ở Câu 1 sẽ được hiển thị trong iframe.

Bài làm chi tiết:

Mã HTML sửa lại thành:

Kết quả hiển thị: