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:

Trình bày được khái niệm biểu mẫu.
Nêu được một số điều khiển hỗ trợ nhập dữ liệu trên trang web.
Hiểu được một số lưu ý trong thiết kế biểu mẫ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, máy tí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: Tạo hứng thú học tập cho HS.

b) Nội dung: HS dựa vào hiểu biết để trả lời câu hỏi Khởi động tr.59 SGK.

c) Sản phẩm: Từ yêu cầu, HS vận dụng sự hiểu biết để trả lời câu hỏi Khởi động tr.59 SGK.

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

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

- GV trình chiếu hình ảnh trên slide để gợi ý cho HS trả lời câu hỏi Khởi động tr.59 SGK.

- GV yêu cầu HS hoạt động cá nhân, suy nghĩ trả lời câu hỏi Khởi động tr.59 SGK: Trên màn hình soạn thảo email có một số ô điều khiển nhập dữ liệu, em hãy cho biết tên và chức năng của các điều khiển đó.

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

- HS quan sát hình ảnh và trả lời câu hỏi Khởi động tr.59 SGK.

- 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 trả lời câu hỏi Khởi động tr.59 SGK.

Gợi ý trả lời:

Tên và chức năng của một số ô điều khiển nhập dữ liệu trên màn hình soạn thảo email:

+ Đến: Dùng để nhập địa chỉ email của người nhận chính.

+ Cc (Carbon copy): Dùng để gửi bản copy cho nhiều người nhận cùng một lúc. Khi sử dụng Cc, người nhận có thể xem được danh sách và biết được những ai cùng nhận được email với nội dung tương tự.

+ Bcc (Blind carbon copy): Dùng để gửi bản copy cho nhiều người nhận cùng một lúc, nhưng người nhận sẽ không biết được những người nhận khác là ai.

+ Tiêu đề: Dùng để nhập tiêu đề của của email.

+ Nội dung: Dùng để nhập nội dung của của email.

+ – Đính kèm tệp: Dùng để đính kèm các tệp dữ liệu vào email.

+ Nút Gửi: Dùng để gửi email sau khi đã nhập đầy đủ thông tin và nội dung.

…

- 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: Màn hình soạn thảo email là một biểu mẫu trên trang web dùng để nhận thông tin và nội dung email của người gửi. Biểu mẫu sẽ bao gồm một số ô điều khiển nhập dữ liệu được thiết kế phù hợp với nhiều kiểu dữ liệu khác nhau. Vậy làm thế nào để tạo được biểu mẫu bằng các phần tử HTML? Để trả lời câu hỏi này, chúng ta sẽ cùng nhau đến với Bài 6: Tạo biểu mẫu.

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

Hoạt động 1: Nhập dữ liệu thông qua biểu mẫu

a) Mục tiêu: Giúp HS:

- Hiểu được cú pháp khai báo phần tử form.

- Phân biệt được khi nào nên dùng POST và GET.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. Nhập dữ liệu thông qua biểu mẫu, thảo luận nhóm và thực hiện nhiệm vụ.

c) Sản phẩm: Khái niệm, cách tạo biểu mẫu.

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

Hoạt động 2: Một số điều khiển hỗ trợ nhập dữ liệu thông dụng và nút lệnh

a) Mục tiêu: Giới thiệu cho HS một số điều khiển nhập dữ liệu thông dụng.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 2. Một số điều khiển hỗ trợ nhập dữ liệu thông dụng và nút lệnh, thảo luận nhóm và thực hiện nhiệm vụ.

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

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

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

SẢN PHẨM DỰ KIẾN

a) Nhập kí tự

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

- GV yêu cầu HS vận dụng kiến thức thực tiễn, trả lời câu hỏi Hoạt động SGK tr.60:

Em hãy phân biệt sự khác nhau giữa việc nhập dữ liệu cho ô “Địa chỉ người nhận” và ô “Nội dung” khi soạn thảo email.

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi:

+ Điều khiển nhập xâu kí tự (ô text) được khai báo như thế nào?

+ Ngoài ô text, HTML còn cung cấp những điều khiển nhập dữ liệu nào?

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

- HS tìm hiểu nội dung mục 2a SGK tr.60 – 61 và thảo luận theo nhóm thực hiện nhiệm vụ.

- GV quan sát và trợ giúp HS.

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

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Hướng dẫn trả lời câu hỏi Hoạt động SGK tr.60:

+ Ô “Địa chỉ người nhận” dùng để nhập một địa chỉ email hợp lệ của người nhận.

+ Ô “Nội dung” dùng để nhập nội dung dạng văn bản mà người gửi thư muốn gửi cho người nhận thư.

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

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

2. Một số điều khiển hỗ trợ nhập dữ liệu thông dụng và nút lệnh

a) Nhập kí tự

- Điều khiển nhập xâu kí tự (ô text) được khai báo bằng phần tử input như sau:

Trong đó:

+ Tên_điều_khiển được gán cho thuộc tính name.

+ Thuộc tính name là không bắt buộc, nhưng tất cả các điều khiển thường được đặt tên để thuận lợi cho việc xử lí dữ liệu gửi từ biểu mẫu về máy chủ web.

+ Thuộc tính value nếu được khai báo thì Giá trị được gán là giá trị mặc định của ô text khi hiển thị trên màn hình trình duyệt web.

Ví dụ 1: Văn bản HTML ở Hình 2a tạo biểu mẫu có hai ô text nhập dữ liệu, trong đó một ô text có giá trị mặc định. Kết quả hiển thị như Hình 2b.

Hình 2a. Ví dụ khai báo ô text

Hình 2b. Kết quả khi mở văn bản HTML ở Hình 2a bằng trình duyệt web

- Ngoài ô text, HTML còn cung cấp một số điều khiển hỗ trợ nhập dữ liệu thông dụng như mô tả ở Bảng 1.

Bảng 1. Một số điều khiển hỗ trợ nhập dữ liệu thông dụng

b) Nhập dữ liệu bằng cách lựa chọn

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

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi:

+ HTML cung cấp những điều khiển nhập dữ liệu theo mẫu cho sẵn dạng lựa chọn nào? Mỗi điều khiển được sử dụng và khai báo như thế nào?

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

- HS tìm hiểu nội dung mục 2b SGK tr.61 – 62 và thảo luận theo nhóm thực hiện nhiệm vụ.

- GV quan sát và trợ giúp HS.

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

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

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

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

b) Nhập dữ liệu bằng cách lựa chọn

Ngoài các điều khiển nhập kí tự, HTML còn cung cấp một số điều khiển nhập dữ liệu theo mẫu cho sẵn dạng lựa chọn như nút chọn (radio) và hộp kiểm (checkbox).

- Danh sách các nút chọn (radio button):

+ Sử dụng trong trường hợp cho người dùng chọn lựa một mục trong danh sách mục gợi ý.

+ Được định nghĩa thông qua phần tử input có thuộc tính type=“radio”.

+ Mỗi nút chọn trong danh sách được khai báo bởi một phần tử input.

Chú ý: Thuộc tính name của các nút chọn phải được khai báo như nhau để khi nhập liệu người dùng chỉ tích (chọn) được một mục trong danh sách.

Ví dụ 2: Nội dung trong phần body của văn bản HTML ở Hình 3a khai báo danh sách các mục chọn. Kết quả hiển thị như Hình 3b.