Slide bài giảng Khoa học máy tính 12 Chân trời bài F5: Tạo biểu mẫu trong trang web
Slide điện tử bài F5: Tạo biểu mẫu trong trang web. Trình bày với các hiệu ứng hiện đại, hấp dẫn. Giúp học sinh hứng thú học bài. Học nhanh, nhớ lâu. Có tài liệu này, hiệu quả học tập của môn Khoa học máy tính 12 Chân trời sáng tạo sẽ khác biệt
Bạn chưa đủ điều kiện để xem được slide bài này. => Xem slide bài mẫu
Tóm lược nội dung
BÀI F5: TẠO BIỂU MẪU TRONG TRANG WEB
A. KHỞI ĐỘNG
HS nghiên cứu nội dung hoạt động Khởi động SGK trang 94, suy nghĩ trả lời câu hỏi theo hiểu biết của mình.
B. HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC
1. Giới thiệu biểu mẫu trong trang web
Biểu mẫu web là gì? Người dùng có thể tương tác với trang web thông qua biểu mẫu theo những cách thức như thế nào?
Nội dung ghi nhớ:
Biểu mẫu web giúp người dùng tương tác với trang web.
Những thao tác thông dụng của người dùng trên biểu mẫu web bao gồm nhập liệu văn bản, số hoặc chọn các phương án, nháy chuột vào nút nhấn,...
2. Tạo một số thành phần trong biểu mẫu
HTML sử dụng thẻ nào để tạo biểu mẫu web?
Nội dung ghi nhớ:
Thẻ <form> dùng để tạo biểu mẫu trong trang web.
Một biểu mẫu có thể bao gồm nhiều thành phần nhập liệu đa dạng với các thẻ như <input>, <textarea>, <button>,…
Thuộc tính type của thẻ <input> và <button> có nhiều giá trị giúp tạo ra những thành phần nhập liệu khác nhau. Đối với thẻ <input>, giá trị của type có thể là text, radio, checkbox,…
THỰC HÀNH
Các bước tạo biểu mẫu trong trang web
Nội dung ghi nhớ:
- Bước 1: HS khởi động Visual Studio Code và tạo tệp login.html.
- Bước 2: HS viết các thẻ <html>, <head>, <body> để khai báo trang web.
- Bước 3: HS viết thêm đoạn mã HTML theo hướng dẫn để tạo biểu mẫu đăng nhập.
- Bước 4: HS mở trang web trong trình duyệt và kiểm tra kết quả thực hiện.
C. HOẠT ĐỘNG LUYỆN TẬP
GV giao nhiệm vụ cho HS, HS hoàn thành phiếu bài tập.
Gợi ý đáp án:
A. Trắc nghiệm
| Câu 1 | Câu 2 | Câu 3 | Câu 4 | Câu 5 |
| B | D | C | A | B |
B. Đúng/sai
Câu 1.
a. Đ; b. S; c. S; d. Đ
C. Tự luận
Câu 1. Biểu mẫu web là thành phần trên trang web giúp người dùng tương tác với trang web.
Câu 2. GV tổ chức cho HS thảo luận theo nhóm 2 – 3 HS để hoàn thành bài tập.
+ Hộp văn bản: <input type="text">.
+ Hộp văn bản nhiều dòng: <textarea></textarea>.
+ Mật khẩu: <input type="password">
+ Nút tròn: <input type="radio">.
+ Hộp kiểm vuông: <input type="checkbox">.
+ Nút nhấn: <button></button>.
Câu 3. Các thuộc tính trong thẻ <input>:
+ type: chỉ định kiểu dữ liệu mà phần tử input chứa, có một số giá trị sau:
| Tên giá trị | Mô tả |
| Vùng dữ liệu nhập địa chỉ email. | |
| password | Vùng dữ liệu nhập mật khẩu. |
| radio | Nút tròn chỉ cho phép chọn một phương án duy nhất. |
| checkbox | Hộp kiểm cho phép chọn nhiều phương án. |
| button | Nút nhấn. |
+ id: chỉ định mã định danh của thẻ <input> nhằm phân biệt với các thẻ <input> khác.
+ name: xác định dữ liệu của phần tử khi gửi biểu mẫu lên máy chủ.
D. HOẠT ĐỘNG VẬN DỤNG
Em hãy thực hiện các yêu cầu dưới đây.
- Bổ sung mã lệnh HTML vào tệp login.html để thêm các thành phần nhập liệu sau:
a) Hộp kiểm có nhãn Ghi nhớ cho lần đăng nhập sau.
b) Đường liên kết Quên mật khẩu? để điều hướng đến trang web recovery.html.
c) Thay đổi kiểu chữ và màu sắc các thành phần của biểu mẫu trong tệp login.html vừa tạo.
2. Tạo biểu mẫu web để người dùng là học sinh làm bài kiểm tra với các yêu cầu sau:
a) Trang web thongtin.html có biểu mẫu gồm 3 hộp văn bản nhập họ tên, lớp, số thứ tự trong lớp và nút nhấn để chuyển đến trang web cauhoi.html.
b) Trang web cauhoi.html có biểu mẫu gồm 3 câu hỏi trắc nghiệm, mỗi câu có 4 phương án lựa chọn, một câu hỏi tự luận và nút nhấn để chọn tệp bài làm tự luận trên máy tính.
c) Tìm hiểu cách tạo hộp danh sách chọn lớp để thay thế cho hộp văn bản nhập lớp.
Slide bài giảng lớp 12 cánh diều
Slide bài giảng lớp 12 chân trời sáng tạo
Slide bài giảng lớp 12 kết nối tri thức
