Giáo án Tin học 12 Kết nối tri thức Bài 12: Tạo biểu mẫu

Giáo án Tin học 12 Kết nối tri thức Bài 12: Tạo biểu mẫu

Xem thử

Chỉ từ 400k mua trọn bộ Giáo án Tin học 12 Kết nối tri thức bản word chuẩn kiến thức, trình bày đẹp mắt, dễ dàng chỉnh sửa:

• B1: gửi phí vào tk: 0711000255837 - NGUYEN THANH TUYEN - Ngân hàng Vietcombank (QR)
• B2: Nhắn tin tới Zalo VietJack Official - nhấn vào đây để thông báo và nhận giáo án

I. MỤC TIÊU

1. Kiến thức

Học sinh được học về:

- Ý nghĩa của biểu mẫu trong trang web.

- Cách thức hoạt động của biểu mẫu.

- Các phần tử thường dùng trong biểu mẫu: tên, ý nghĩa, cách sử dụng.

2. Năng lực

- Hiểu được ý nghĩa của biểu mẫu trong trang web.

- Hiểu được cách thức hoạt động của biểu mẫu

- Hiểu được cú pháp tạo biểu mẫu và các thành phần trong biểu mẫu.

- Vận dụng cú pháp được học tạo được biểu mẫu theo yêu cầu của GV và tự tạo được biểu mẫu khác theo nhu cầu sử dụng.

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.

- Luôn chủ động tìm kiếm các cách làm mới, cải tiến những cái đang có để tốt hơn.

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

- GV chuẩn bị:

• SGK, bài giảng PPT, phòng máy tính có kết nối Internet, máy chiếu.

• Chuẩn bị ví dụ biểu mẫu đăng kí thành viên CLB

- HS: SGK, vở ghi, chuẩn bị bài ở nhà.

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

Bài học được thực hiện trong 2 tiết: 1 tiết lí thuyết, 1 tiết thực hành.

A. MỞ ĐẦU

Hoạt động 1. Khởi động (3 phút)

a) Mục tiêu:

- HS thấy được ý nghĩa của việc sử dụng biểu mẫu trong trang web, tập trung sự chú ý của HS vào một loại phần tử mới – phần tử biểu mẫu (form).

b) Tổ chức thực hiện

- GV nêu lại tình huống khởi động trong SGK: HS tham gia hội chợ ẩm thực, cần tạo website để quảng cáo sản phẩm và bán hàng, trên website cần có tính năng đặt hàng. Tương tự như các trang web thương mại điện tử khác (shoppee, trang web của các nhãn hàng FPT shop, comem.vn…, ngoài nội dung giới thiệu các mặt hàng, khi KH chọn 1 mặt hàng ➔ hiển thị giao diện cho KH nhập thông tin tạo đơn hàng) ➔ Sử dụng form, giúp thu thập dữ liệu từ người dùng.

- GV yêu cầu HS lấy thêm ví dụ về các trang web khác có sử dụng form.

- HS suy nghĩ trả lời.

- GV nhận xét, bổ sung giới thiệu một số ví dụ về trang web sử dụng form để lấy ý kiến phản hồi, form đăng kí thông tin, đăng nhập…

- GV chốt ý nghĩa và sự phổ biến của form trên các trang web ➔ dẫn dắt vào bài.

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

Hoạt động 2. Tìm hiểu về cách tạo biểu mẫu trong trang web (30 phút)

a) Mục tiêu

- HS hiểu khái niệm form, các thành phần của form, hoạt động của form.

- Hiểu được cấu trúc của lệnh tạo form.

- Hiểu được ý nghĩa các phần tử của form, cách tạo các phần tử của form.

2.1. Khái niệm và thành phần của biểu mẫu

b) Nội dung hoạt động:

Nội dung: 1. Khái niệm biểu mẫu. 2. Thành phần của biểu mẫu 3. Hoạt động của biểu mẫu.

c) Sản phẩm

1. Khái niệm biểu mẫu. - Biểu mẫu web hay phần tử form của HTML là một công cụ dùng để thu thập dữ liệu, tạo sự tương tác với người dùng. 2. Thành phần: - Biểu mẫu hiển thị trên trang web: được tạo bởi các đoạn mã HTML, được sử dụng để người dùng nhập và gửi thông tin. à Tập trung vào thành phần này. - Các ứng dụng để hoặc script xử lí dữ liệu: thường nằm trên máy chủ. 3. Hoạt động của biểu mẫu. Ví dụ: mô tả cách thức hoạt động của biểu mẫu trên trang web.

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

# 1. Chuyển giao nhiệm vụ.

- GV đặt câu hỏi cho từng mục, HS nghiên cứu SGK trả lời.

- GV giảng giải cho HS các nội dung. Lưu ý, thành phần thứ 2 của biểu mẫu không thuộc phạm vi ngôn ngữ HTML nên không đề cập ở đây, chỉ tập chung vào cách tạo biểu mẫu.

- GV phân tích ví dụ, cho HS thấy được hoạt động của biểu mẫu.

# 2. Thực hiện nhiệm vụ

- HS hoạt động cá nhân, lần lượt trả lời các câu hỏi của GV.

- Lắng nghe GV giảng giải và theo dõi ví dụ.

# 3. Báo cáo, thảo luận

- GV kiểm tra nhanh HS bằng cách đặt các câu hỏi pháp vấn ngắn về các nội dung vừa học. HS trả lời nhanh.

# 4. Kết luận

- Chốt các kiến thức trọng tâm.

2.2. Tạo biểu mẫu

b) Nội dung hoạt động

Nội dung:

1. Nghiên cứu SGK, hoàn thành phiếu học tập (sơ đồ tư duy). (Phiếu học tập)

2. Phân tích ví dụ tạo biểu mẫu đăng kí CLB như mẫu.

3. Các câu hỏi tự luyện trang 69.

c) Sản phẩm

1. Phiếu học tập 2. Ví dụ biểu mẫu đăng kí CLB Code 3. Câu hỏi tự luyện C1. Điểm khác biệt của radio, checkbox và select: − Radio và checkbox là hai type trong phần tử input còn select là phần tử select − Radio và select chỉ chọn một giá trị trong các giá trị sẵn có nhưng khác nhau về cách biểu diễn (không gian sử dụng trong mẫu biểu). Thông thường o Số lựa chọn không quá 7: người thiết kế thường dùng radio o Số lựa chọn lớn hơn 7: thường dùng select − Select chỉ tập trung vào lựa chọn được chọn, radio phân bố sự tập trung đều nhau. − Checkbox dùng để chọn nhiều giá trị, mỗi giá trị dưới dạng có/không C2. Câu lệnh <input type="button" value="Quên mật khẩu"> Hoặc: <button>Quên mật khẩu</button>

................................

................................

................................

(Nguồn: NXB Giáo dục)

Trên đây tóm tắt một số nội dung miễn phí trong bộ Giáo án Tin học 12 Kết nối tri thức mới nhất, để mua tài liệu đầy đủ, Thầy/Cô vui lòng xem thử:

Xem thử

Xem thêm các bài soạn Giáo án Tin học lớp 12 Kết nối tri thức hay, chuẩn khác:

• Giáo án Tin 12 Bài 13: Khái niệm, vai trò của CSS

• Giáo án Tin 12 Bài 14: Định dạng văn bản bằng CSS

• Giáo án Tin 12 Bài 15: Tạo màu cho chữ và nền

• Giáo án Tin 12 Bài 16: Định dạng khung

• Giáo án Tin 12 Bài 17: Các mức ưu tiên của bộ chọn

---