Giáo án Tin học ứng dụng 12 cánh diều bài 6: Tạo biểu mẫu
Giáo án bài 6: Tạo biểu mẫu sách Tin học 12 - Tin học ứng dụng cánh diều. Được thiết kế theo công văn 5512, chi tiết, đầy đủ. Giáo án là bản word, có thể tải về và dễ dàng chỉnh sửa. Bộ giáo án có đầy đủ các bài trong học kì 1 + học kì 2 của Tin học 12 cánh diều. Kéo xuống dưới để tham khảo chi tiết.
Xem: => Giáo án Tin học 12 - Định hướng Tin học ứng dụng cánh diều
Các tài liệu bổ trợ khác
Xem toàn bộ: Giáo án tin học ứng dụng 12 cánh diều đủ cả năm
Ngày soạn:…/…/…
Ngày dạy:…/…/…
BÀI 6: 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ẽ:
Phát biểu được khái niệm biểu mẫu.
Mô tả được một số điều khiển hỗ trợ nhập dữ liệu trên trang web.
Nêu được một số lưu ý trong thiết kế biểu mẫ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:
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.
![](/sites/default/files/ck5/2024-08/12/image_706a3589200.png)
- 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 CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾ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: + Biểu mẫu là gì? + Biểu mẫu bao gồm những thành phần nào? + HTML định nghĩa phần tử nào để tạo biểu mẫu? + Phần tử form có cú pháp khai báo như thế nào? + HTML cung cấp nhiều phương thức gửi dữ liệu cho biểu mẫu nhưng được dùng phổ biến nhất là GET và POST. Vậy khi nào nên dùng GET? Khi nào nên dùng POST? + Người dùng cần thực hiện thao tác gì để dữ liệu nhập vào được gửi đến máy chủ? + Sau khi tiếp nhận, máy chủ web sẽ tiến hành xử lí dữ liệu 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 1 SGK tr.59 – 60 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. | 1. Nhập dữ liệu thông qua biểu mẫu - Biểu mẫu trên trang web là một giao diện để thu nhận thông tin từ người dùng. - Biểu mẫu bao gồm: + Các điều khiển nhập dữ liệu như ô văn bản, nút chọn, hộp kiểm,... được thiết kế phù hợp với nhiều kiểu dữ liệu khác nhau, giúp người dùng dễ dàng nhập dữ liệu và giảm sai sót. + Các nút lệnh cho phép người dùng xác nhận kết thúc nhập dữ liệu để gửi yêu cầu và dữ liệu về máy chủ web. Ví dụ: Biểu mẫu ở Hình 1 có ô văn bản để nhập địa chỉ email hoặc số điện thoại. Kết thúc việc nhập dữ liệu và gửi yêu cầu, người dùng nháy chuột vào nút lệnh Tiếp theo. ![]() Hình 1. Biểu mẫu đăng nhập thư điện tử - HTML định nghĩa phần tử form để tạo biểu mẫu. - Phần tử form có cú pháp khai báo như sau: ![]() Trong đó: + Thuộc tính action xác định tài nguyên web sẽ tiếp nhận và xử lí dữ liệu mà người dùng vừa gửi đến máy chủ. Tài nguyên web thường là các chương trình được viết bằng các ngôn ngữ lập trình như: Java, PHP, Python,.... + Thuộc tính method xác định phương thức gửi dữ liệu đến máy chủ để xử lí, thường có giá trị là GET hoặc POST:
![]()
![]() - Khi kết thúc quá trình nhập dữ liệu, người dùng cần nháy chuột vào nút lệnh có chức năng gửi dữ liệu trên biểu mẫu để dữ liệu nhập vào được gửi đến máy chủ web. - Sau khi tiếp nhận, xử lí dữ liệu, máy chủ web gửi trả kết quả và kết quả thường là một trang web khác. |
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. ![]() Hình 3a. Ví dụ khai báo danh sách Hình 3b. Kết quả khi mở văn bản HTML ở Hình 3a bằng trình duyệt web - Danh sách chọn hộp kiểm (checkbox): + Cho phép người nhập dữ liệu có thể chọn nhiều hoặc tất cả các mục trong danh sách các mục chọn. + Được định nghĩa thông qua phần tử input có thuộc tính type=“checkbox”.” Ví dụ 3: Nội dung trong phần body của văn bản HTML ở Hình 4a khai báo danh sách các hộp kiểm. Kết quả hiển thị như Hình 4b. ![]() Hình 4a. Ví dụ khai báo danh sách hộp kiểm Hình 4b. Kết quả khi mở văn bản HTML ở Hình 4a bằng trình duyệt web |
---------------------------------------
----------------------Còn tiếp---------------------
Trên chỉ là 1 phần của giáo án. Giáo án khi tải về có đầy đủ nội dung của bài. Đủ nội dung của học kì I + học kì II
MỘT VÀI THÔNG TIN:
- Word được soạn: Chi tiết, rõ ràng, mạch lạc
- Giáo án soạn đầy đủ các bài trong SGK
- Nếu có thiếu, sai sót. Sẽ được bổ sung miễn phí trong suốt năm học
- Các phản hồi của giáo viên sẽ được trả lời gần như ngay lập tức
Thời gian bàn giao giáo án word
- Khi đặt, nhận luôn giáo án kì I
- 15/11 bàn giao 1/2 học kì II
- 15/12 bàn giao đủ cả năm
Phí giáo án
- Giáo án word: 600k - Đặt bây giờ: 450k
- Khi đặt chỉ cần gửi 250k
- Đến lúc nhận đủ kì 1. Gửi số còn lại
=>Khi đặt sẽ nhận ngay và luôn:
- Giáo án word - đủ kì I.
- Phiếu trắc nghiệm cấu trúc mới: 10 - 12 phiếu
- Mẫu đề thi cấu trúc mới: Ma trận, lời giải, thang điểm
- PPCT, file word đáp án sgk
Cách đặt:
- Bước 1: Gửi phí vào tk: 10711017 - Chu Văn Trí - Ngân hàng ACB (QR)
- Bước 2: Nhắn tin tới Zalo Fidutech - nhấn vào đây để thông báo và nhận giáo án
Xem toàn bộ: Giáo án tin học ứng dụng 12 cánh diều đủ cả năm
ĐẦY ĐỦ GIÁO ÁN CÁC BỘ SÁCH KHÁC
GIÁO ÁN WORD LỚP 12 CÁNH DIỀU
Giáo án hoạt động trải nghiệm hướng nghiệp 12 cánh diều
Giáo án Tin học 12 - Định hướng khoa học máy tính cánh diều
Giáo án Tin học 12 - Định hướng Tin học ứng dụng cánh diều
GIÁO ÁN POWERPOINT LỚP 12 CÁNH DIỀU
Giáo án Powerpoint Toán 12 Cánh diều
Giáo án powerpoint hình học 12 cánh diều
Giáo án powerpoint đại số 12 cánh diều
Giáo án powerpoint vật lí 12 cánh diều
Giáo án powerpoint sinh học 12 cánh diều
Giáo án powerpoint hoá học 12 cánh diều
Giáo án powerpoint ngữ văn 12 cánh diều
Giáo án powerpoint lịch sử 12 cánh diều
Giáo án powerpoint địa lí 12 cánh diều
Giáo án powerpoint Kinh tế pháp luật 12 cánh diều
Giáo án powerpoint Công nghệ 12 Công nghệ điện - điện tử cánh diều
Giáo án powerpoint Công nghệ 12 Lâm nghiệp - Thuỷ sản cánh diều
Giáo án powerpoint Tin học 12 - Định hướng Tin học ứng dụng cánh diều
Giáo án powerpoint Tin học 12 - Định hướng khoa học máy tính cánh diều
Giáo án powerpoint hoạt động trải nghiệm hướng nghiệp 12 cánh diều
GIÁO ÁN CHUYÊN ĐỀ LỚP 12 CÁNH DIỀU
GIÁO ÁN POWERPOINT CHUYÊN ĐỀ 12 CÁNH DIỀU
GIÁO ÁN DẠY THÊM LỚP 12 CÁNH DIỀU
Giáo án dạy thêm toán 12 cánh diều
Giáo án dạy thêm ngữ văn 12 cánh diều
Giáo án powerpoint dạy thêm ngữ văn 12 cánh diều
Giáo án powerpoint dạy thêm toán 12 cánh diều