Giáo án Khoa học máy tính 12 Cánh diều bài 7: Thực hành tạo biểu mẫu

Ngày soạn:…/…/… 

Ngày dạy:…/…/…

BÀI 7: THỰC HÀNH TẠO BIỂU MẪU

(2 tiết)

I. MỤC TIÊU

1. Kiến thức

Sau bài học này, HS sẽ:

• Tạo được biểu mẫu trên trang web.

• Thêm được các điều kiện thông dụng vào biểu mẫu.

• Thiết kế được biểu mẫu phù hợp với yêu cầu nhập dữ liệu.

2. Năng lực

Năng lực chung: 

• Năng lực học tập, tự học: HS biết tự tìm kiếm, chuẩn bị và lựa chọn tài liệu, phương tiện học tập trước giờ học, quá trình tự giác tham gia các và thực hiện các hoạt động học tập cá nhân trong giờ học ở trên lớp,…

• Năng lực giao tiếp và hợp tác: Khả năng phân công và phối hợp thực hiện nhiệm vụ học tập.

• Năng lực giải quyết vấn đề sáng tạo: HS đưa ra các phương án trả lời cho câu hỏi, bài tập xử lý tình huống, vận dụng kiến thức, kĩ năng của bài học để giải quyết vấn đề thường gặp.

Năng lực Tin học:

• Tạo được biểu mẫu phù hợp với yêu cầu nhập dữ liệu. 

3. Phẩm chất

• Có ý thức chủ động tìm hiểu và cập nhật các kiến thức mới.

• Cẩn thận, tỉ mỉ khi viết các mã lệnh HTML.

• Hình thành tư duy lôgic phân tích yêu cầu cần đạt để thực hiện một nhiệm vụ cụ thể.

II. THIẾT BỊ DẠY HỌC VÀ HỌC LIỆU 

• GV: SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Cánh diều, bài trình chiếu (Slide), máy chiếu, phòng thực hành có kết nối Internet.

• HS: SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Cánh diều, vở ghi.

III. TIẾN TRÌNH DẠY HỌC

A. HOẠT ĐỘNG KHỞI ĐỘNG 

a) Mục tiêu: Giúp HS ôn tập lại một số điều khiển hỗ trợ nhập dữ liệu thông dụng.

b) Nội dung: HS ôn tập lại một số điều khiển hỗ trợ nhập dữ liệu thông dụng.

c) Sản phẩm: Một số điều khiển hỗ trợ nhập dữ liệu thông dụng.

d) Tổ chức thực hiện: 

Bước 1: GV chuyển giao nhiệm vụ: 

- GV cho HS nối tên một số điều khiển hỗ trợ nhập dữ liệu với khai báo của nó. 

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS vận dụng những kiến thức đã học để hoàn thành hoạt động.

- GV quan sát và hỗ trợ HS khi cần thiết.

Bước 3: Báo cáo kết quả hoạt động, thảo luận.

- GV mời một số HS xung phong trình bày đáp án.

Gợi ý trả lời: 

- HS khác lắng nghe, nhận xét và bổ sung.

Bước 4: Đánh giá kết quả thực hiện: 

GV đánh giá kết quả của HS, dẫn dắt HS vào bài học mới: Ở bài 6, các em đã được làm quen với biểu mẫu, biết được một số điều khiển hỗ trợ nhập dữ liệu trên trang web và một số lưu ý trong thiết kế biểu mẫu. Vậy để giúp các em ôn tập lại kiến thức đồng thời được thực hành theo nội dung lí thuyết đã học, chúng ta sẽ cùng nhau đến vớiBài 7: Thực hành tạo biểu mẫu.

B. HÌNH THÀNH KIẾN THỨC MỚI

Hoạt động 1: Tạo biểu mẫu có ô text nhập dữ liệu

a) Mục tiêu: HS biết cách khai báo biểu mẫu và các ô điều khiển nhập dữ liệu là ô text và textarea.

b) Nội dung: GV hướng dẫn HS thực hiện theo Nhiệm vụ 1 SGK tr.65.

c) Sản phẩm: HS tạo được biểu mẫu có ô text nhập dữ liệu.

d) Tổ chức thực hiện:
 

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Nhiệm vụ 1. Tạo tiêu đề mục cho trang web giới thiệu về bản thân Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS đọc kĩ yêu cầu của Nhiệm vụ 1 SGK tr.65 và thực hành cá nhân theo hướng dẫn. Yêu cầu: Soạn văn bản HTML để tạo biểu mẫu như ở Hình 1 khi hiển thị trên trình duyệt web. Hình 1. Một biểu mẫu có ô text nhập  dữ liệu  Hướng dẫn: + Bước 1: Tạo tệp “Bai7-NV1.html”. + Bước 2: Tạo cấu trúc và khai báo phần tử head. + Bước 3: Tạo biểu mẫu. Khai báo phần tử form bằng cặp thẻ <form></form>. Trong nội dung phần tử form: Thêm ô text để nhập liệu cho thông tin “Họ và tên” bằng khai báo: Chú ý: Phần tử label được dùng để tạo nhãn gắn với điều khiển, nhằm làm cho việc truy cập các điều khiển trên biểu mẫu được dễ dàng (nháy chuột vào nhãn là có thể nhập dữ liệu cho ô điều khiển đó). Khai báo này sử dụng phần tử br nhằm tạo ngắt dòng để ô text “Địa chỉ email” bắt đầu ở dòng mới. Thêm ô text để nhập dữ liệu cho thông tin “Địa chỉ email”. Thêm ô textarea để nhập đoạn văn bản thể hiện thông tin “Ý kiến đóng góp”: Trong đó, thuộc tính rows và cols xác định kích thước hiển thị ô nhập dữ liệu. + Bước 4: Ghi lưu, mở tệp bằng trình duyệt web và xem kết quả. Bước 2: HS thực hiện nhiệm vụ học tập:  - HS tiếp nhận và thực hiện theo đúng hướng dẫn để hoàn thành yêu cầu Nhiệm vụ 1. - Trong quá trình HS thực hành, GV quan sát, hỗ trợ, giải đáp các vướng mắc của HS. Bước 3: Báo cáo kết quả hoạt động, thảo luận:  - GV mời một số HS trình bày kết quả. - HS quan sát bài làm của các bạn khác, nhận xét nhau. Bước 4: Đánh giá kết quả thực hiện:  - GV nhận xét, kiểm tra kết quả thực hiện Nhiệm vụ 1 của HS. - Nhiệm vụ 1 được gọi là hoàn thành khi HS tạo được biểu mẫu như Hình 1.

Nhiệm vụ 1. Tạo tiêu đề mục cho trang web giới thiệu về bản thân - Bước 1: HS tạo tệp “Bai7-NV1.html”. - Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head. - Bước 3: HS thực hiện tạo biểu mẫu. - Bước 4: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả. * Nội dung tệp “Bai7-NV1.html”:

Hoạt động 2: Thêm các điều khiển nhập dữ liệu lựa chọn, gửi dữ liệu vào biểu mẫu

a) Mục tiêu: HS thực hành kĩ năng tạo điều khiển nhập liệu lựa chọn dạng hộp kiểm (checkbox).

b) Nội dung: GV hướng dẫn HS thực hiện theo Nhiệm vụ 2 SGK tr.66.

c) Sản phẩm: Văn bản HTML ở Nhiệm vụ 1 được thêm các điều khiển nhập dữ liệu lựa chọn, gửi dữ liệu.

d) Tổ chức thực hiện:

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Nhiệm vụ 2. Thêm các điều khiển nhập dữ liệu lựa chọn, gửi dữ liệu vào biểu mẫu Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS đọc kĩ yêu cầu của Nhiệm vụ 2 SGK tr.66 và thực hành cá nhân theo hướng dẫn. Yêu cầu: Soạn văn bản HTML để thêm các điều khiển nhập dữ liệu như minh hoạ ở Hình 2 vào biểu mẫu đã tạo ở Nhiệm vụ 1. Khi mở bằng trình duyệt web, kết quả hiển thị như ở Hình 3. Hình 2. Ví dụ điều khiển lựa chọn,  gửi dữ liệu

Nhiệm vụ 2. Thêm các điều khiển nhập dữ liệu lựa chọn, gửi dữ liệu vào biểu mẫu - Bước 1: HS đổi tên tệp “Bai7-NV1.html” thành “Bai7-NV2.html”. - Bước 2: HS thực hiện cập nhật nội dung phần tử body. - Bước 3: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả. * Nội dung tệp “Bai7-NV2.html”:

---------------------------------------

----------------------Còn tiếp---------------------