Giáo án Khoa học máy tính 12 chân trời Bài F5: Tạo biểu mẫu trong trang web

Giáo án Bài F5: Tạo biểu mẫu trong trang web sách Tin học 12 - Định hướng Khoa học máy tính chân trời sáng tạo. Đượ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 chân trời sáng tạo. Kéo xuống dưới để tham khảo chi tiết.

Xem: => Giáo án Tin học 12 - Định hướng Khoa học máy tính chân trời sáng tạo

Xem video về mẫu Giáo án Khoa học máy tính 12 chân trời Bài F5: Tạo biểu mẫu trong trang web

Các tài liệu bổ trợ khác

Xem toàn bộ: Giáo án khoa học máy tính 12 chân trời sáng tạo đủ cả năm

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

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

 

BÀI F5: TẠO BIỂU MẪU TRONG TRANG WEB

(2 tiết)

I. MỤC TIÊU

1. Kiến thức

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

  • Sử dụng được các thẻ HTML để tạo biểu mẫu trong trang web.

2. Năng lực

Năng lực chung: 

  • Tự chủ và tự học: Tự lực (Chủ động, tích cực thực hiện công việc của bản thân).

  • Giao tiếp và hợp tác: Xác định trách nhiệm và hoạt động của bản thân (Phân tích được các công việc cần thực hiện để hoàn thành nhiệm vụ của nhóm trong các hoạt động nhóm).

  • Giải quyết vấn đề và sáng tạo: Hình thành và triển khai ý tưởng mới (Nêu được nhiều ý tưởng mới trong học tập, suy nghĩ không theo lối mòn, tạo ra yếu tố mới dựa trên những ý tưởng khác nhau).

Năng lực Tin học: 

  • NLc (Giải quyết vấn đề với sự hỗ trợ của công nghệ thông tin và truyền thông): Tạo được biểu mẫu trong trang web bằng thẻ HTML.

3. Phẩm chất

  • Chăm chỉ: Tích cực tìm tòi và sáng tạo trong việc học tập.

  • Trách nhiệm: Tích cực, tự giác và nghiêm túc rèn luyện sử dụng thành thạo các mã lệnh.

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

1. Đối với giáo viên

  • SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Chân trời sáng tạo, bài trình chiếu (Slide), máy chiếu, phiếu học tập.

  • Máy tính có cài sẵn phần mềm Visual Studio Code và có kết nối Internet, các tệp HTML dùng trong hoạt động Thực hành.

2. Đối với học sinh

  • SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Chân trời sáng tạo, vở ghi.

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

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

a) Mục tiêu: HS biết tương tác với trang web bằng nhiều hình thức khác ngoài việc nháy chuột vào các liên kết, nút nhấn. Chẳng hạn như nhập dữ liệu qua hộp nhập văn bản, hộp kiểm, hộp lựa chọn,…

b) Nội dung: 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.

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 SGK trang 94.

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 SGK trang 94.

- 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.94 SGK: Khi truy xuất trang web, người dùng không chỉ xem nội dung mà còn muốn tương tác với trang web, chẳng hạn nhập vào nội dung mới. Em hãy nêu một số tình huống mà em thường tương tác với trang web và mô tả cụ thể các thao tác này.

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

- HS quan sát hình ảnh gợi ý và trả lời câu hỏi.

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

Gợi ý trả lời: 

Có nhiều cách tương tác với trang web như:

+ Bày tỏ cảm xúc với một nội dung nào đó.

+ Để lại bình luận dưới một bài viết.

How to add an Instagram comment to your Stories - Minter.io Blog | Social  Media Analytics

+ Đăng kí thành viên.

Hướng dẫn cách đăng ký tài khoản thành viên CGV - Fptshop.com.vn

+ Đăng nhập tài khoản.

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: Ngoài các thao tác như bày tỏ cảm xúc, xem, dừng, điều chỉnh âm lượng video,… các em còn thường xuyên tương tác với trang web bằng các biểu mẫu như đăng nhập, đăng kí tài khoản thành viên, gửi ý kiến phản hồi, nhập thông tin mua hàng,… Vậy để giúp các em biết cách sử dụng các thẻ HTML để tạo biểu mẫu trong trang web, chúng ta sẽ cùng nhau đến với Bài F5: Tạo biểu mẫu trong trang web.

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

Hoạt động 1: Giới thiệu biểu mẫu trong trang web

a) Mục tiêu: Cung cấp cho HS về khái niệm biểu mẫu trong các trang web.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. Giới thiệu biểu mẫu trong trang web và thực hiện nhiệm vụ.

c) Sản phẩm: HS hiểu khái niệm biểu mẫu và cách tương tác với trang web thông qua 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 hoạt động cá nhân và trả lời các câu hỏi:

+ 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?

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.94 SGK:

Em hãy kể tên một số biểu mẫu phổ biến trên các trang web.

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.94 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: 

-  HS trả lời câu hỏi và nhận xét lẫn nhau.

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.

- GV kết luận:

  • 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,...

1. Giới thiệu biểu mẫu trong trang web

Khái niệm: Biểu mẫu web là thành phần để người dùng nhập dữ liệu vào trang web. 

- Người dùng có thể tương tác với trang web thông qua biểu mẫu theo nhiều cách thức khác nhau như: 

+ Nhập dữ liệu văn bản, số, email, mật khẩu.

+ Chọn một hay nhiều phương án.

+ Nháy chuột vào nút nhấn.

Ví dụ 1: Khi mua sắm trực tuyến trên trang web, người dùng phải tương tác với biểu mẫu thanh toán như nhập số lượng hàng cần mua, nhập địa chỉ nhận hàng, chọn phương thức thanh toán,… 

Hình 1. Biểu mẫu thanh toán mua sắm trực tuyến

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.94 SGK:

Một số biểu mẫu phổ biến trên các trang web:

- Biểu mẫu đăng kí, đăng nhập tài khoản.

- Biểu mẫu đặt hàng, thanh toán.

- Biểu mẫu đánh giá, bình luận.

- Biểu mẫu thực hiện khảo sát.

- Biểu mẫu tìm kiếm.

- Biểu mẫu đặt lịch hẹn.

Hoạt động 2: Tạo một số thành phần trong biểu mẫu

a) Mục tiêu: 

- HS biết cách sử dụng các thẻ <form>, <input>, <label>, <textarea> để tạo biểu mẫu.

- HS hiểu thuộc tính action, method của thẻ <form> với hai giá trị GET hoặc POST.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 2. Tạo một số thành phần trong biểu mẫu, thảo luận nhóm và thực hiện nhiệm vụ.

c) Sản phẩm: Các thành phần trong 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: 

+ HTML sử dụng thẻ nào để tạo biểu mẫu web?

+ Thẻ <form> có cú pháp như thế nào?

- GV giới thiệu và giải thích cho HS về hai phương thức gửi dữ liệu của biểu mẫu.

- GV tiếp tục đặt câu hỏi cho các nhóm thảo luận:

+ HTML sử dụng thẻ nào để tạo các hộp văn bản trong biểu mẫu?

+ Em hãy quan sát Ví dụ 2 và trả lời các câu hỏi sau:

  • Thẻ  <label> được dùng để làm gì?

  • Thẻ  <label> có thuộc tính gì? Giá trị của thuộc tính này có gì đặc biệt?

  • Thẻ  <input> có những thuộc tính nào?

+ Ngoài text, thuộc tính type của thẻ <input> còn có thể nhận những giá trị nào khác nữa?

- GV đưa ra một số ví dụ minh hoạ để HS hiểu về một số kiểu giá trị của thuộc tính  type.

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.97 SGK:

Em hãy thêm vào biểu mẫu trong các ví dụ trên những thành phần sau:

a) Hộp văn bản để người dùng nhập địa chỉ email.

b) Hộp kiểm để người dùng chọn thêm một câu lạc bộ.

c) Nút nhấn để xoá dữ liệu hiện có trên biểu mẫu.

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 2 SGK tr.94 – 97 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.

- GV kết luận:

  • 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,…

2. Tạo một số thành phần trong biểu mẫu

- HTML sử dụng thẻ <form> để tạo biểu mẫu web.

- Cú pháp thẻ <form>:

Trong đó:

+ Thuộc tính action chỉ định địa chỉ trang mà biểu mẫu sẽ gửi dữ liệu đến để xử lí. 

+ Thuộc tính method chỉ định phương thức gửi dữ liệu. Có hai phương thức chính để gửi dữ liệu:

  • GET:  

  • Dữ liệu được gửi tới máy chủ dưới dạng chuỗi truy vấn được gắn vào URL ngay sau “địa_chỉ_trang_
    nhận_dữ_liệu” trong thuộc tính action. 

  • Giới hạn dữ liệu được gửi tuỳ vào trình duyệt và máy chủ, thường là 255 kí tự.

  • Ví dụ:

  • POST:  

  • Dữ liệu được gửi đến máy chủ dưới dạng gói tin.

  • Dữ liệu không bị giới hạn kích thước, không hiển thị trực tiếp trong URL.

  • Ví dụ:

  • Nếu không chỉ định phương thức gửi dữ liệu thì phương thức gửi dữ liệu mặc định là GET. Tương tự, nếu không chỉ định địa chỉ trang nhận dữ liệu thì trang nhận dữ liệu mặc định chính là trang hiện tại.

- Một trong những thành phần nhập liệu phổ biến của biểu mẫu là hộp văn bản, cho phép nhập văn bản chỉ gồm một dòng duy nhất. Để tạo thành phần này, HTML sử dụng thẻ <input>.

Ví dụ 2: Tệp gopy.html với đoạn mã HTML tạo một biểu mẫu chứa hai hộp văn bản dùng để nhập Họ tênLớp (Hình 2).

Hình 2. Biểu mẫu nhập Họ tên và Lớp

Trong đoạn mã HTML trên:

+ Thẻ <label>:

  • Được sử dụng để hiển thị nhãn tên cho các thẻ khác của biểu mẫu như <input>, <textarea>,...

  • Có thuộc tính for, giá trị của thuộc tính này phải đồng nhất với giá trị của

thuộc tính  id trong thẻ <input> đi cùng. 

+ Thẻ <input> có các thuộc tính:

  • type: được chỉ định là text cho biết hộp văn bản chỉ cho phép nhập một dòng.

  • id: chỉ định mã định danh của thẻ <input> nhằm phân biệt với các thẻ <input> khác. 

Trong một biểu mẫu, thuộc tính id thường được dùng để xác định một phần tử cụ thể để thao tác với CSS hoặc JavaScript.

  • name: xác định dữ liệu của phần tử khi gửi biểu mẫu lên máy chủ.

- Bên cạnh giá trị text, thuộc tính type của thẻ <input> còn có một số giá trị sau:

Bảng 1. Các giá trị của thuộc tính type trong thẻ <input>

Tên giá trị

Mô tả

email

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.

Ví dụ 3: Thêm đoạn mã HTML vào thẻ <form> trong Ví dụ 2 để tạo hai nút tròn giúp học sinh chọn một trong hai định hướng môn Tin học: Khoa học máy tính hoặc Tin học ứng dụng (Hình 3). Khi người dùng chọn một phương án thì các phương án còn lại sẽ tự động huỷ chọn.

Hình 3. Hai nút tròn cho phép chọn một trong hai phương án

Trong đoạn mã HTML trên:

+ Thuộc tính name của hai thẻ <input> được chỉ định cùng một giá trị (dinhhuong) để hai nút tròn cùng thuộc một nhóm phương án chung. 

Ví dụ 4: Thêm đoạn mã HTML vào thẻ <form> trong Ví dụ 2 để tạo ba hộp kiểm dùng để chọn các câu lạc bộ đang tham gia (Hình 4). Hộp kiểm cho phép đánh dấu chọn nhiều phương án cùng một lúc.

Hình 4. Ba hộp kiểm cho phép đánh

dấu chọn nhiều phương án

Ví dụ 5: Thêm đoạn mã HTML vào thẻ <form> trong Ví dụ 2 để tạo một hộp văn bản nhập ý kiến đồng thời tạo thêm một nút nhấn Gửi (Hình 5).

Hình 5. Hộp văn bản cho phép nhập nhiều dòng và một nút nhấn để gửi

Trong đoạn mã HTML trên:

+ Thẻ <textarea>:

  • Được dùng để tạo hộp văn bản cho phép nhập nhiều dòng.

  • Có thuộc tính rows và cols để chỉ định số dòng và số cột của khung văn bản khi hiển thị.

+ Thẻ <button>:

  • Giúp người dùng gửi thông tin sau khi hoàn thành biểu mẫu. 

  • Nếu thuộc tính type của thẻ <button> được chỉ định là submit thì trang web sẽ gửi dữ liệu của biểu mẫu về trang nhận dữ liệu. 

  • Nếu không muốn gửi dữ liệu mà chỉ thực thi hàm, có thể chỉ định giá trị button (trùng tên với thẻ <button>) cho thuộc tính type hoặc giá trị reset để xoá dữ liệu hiện hành và đưa biểu mẫu về trạng thái mặc định ban đầu.

…………………

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

-------------------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

Hệ thống có đầy đủ các tài liệu:

  • Giáo án word (400k)
  • Giáo án Powerpoint (500k)
  • Trắc nghiệm theo cấu trúc mới (250k)
  • Đề thi cấu trúc mới: ma trận, đáp án, thang điểm..(250k)
  • Phiếu trắc nghiệm câu trả lời ngắn (250k)
  • Trắc nghiệm đúng sai (250k)
  • Lý thuyết bài học và kiến thức trọng tâm (200k)
  • File word giải bài tập sgk (150k)
  • Phiếu bài tập để học sinh luyện kiến thức (200k)
  • .....
  • Các tài liệu được bổ sung liên tục để 30/01 có đủ cả năm

Có thể chọn nâng cấp lên VIP đê tải tất cả ở tài liệu trên

  • Phí nâng cấp VIP: 800k/năm

=> Chỉ gửi 450k. Tải về dùng thực tế. Nếu hài lòng, 7 ngày sau mới gửi phí còn lại

Cách nâng cấp:

  • Bước 1: Chuyển phí vào STK: 1214136868686 - cty Fidutech - MB(QR)
  • Bước 2: Nhắn tin tới Zalo Fidutech - nhấn vào đây để thông báo và nhận tài liệu

Xem toàn bộ: Giáo án khoa học máy tính 12 chân trời sáng tạo đủ cả năm

ĐẦY ĐỦ GIÁO ÁN CÁC BỘ SÁCH KHÁC

Đủ giáo án word và powerpoint các môn lớp 12 kết nối tri thức
Đủ giáo án word và powerpoint các môn lớp 12 cánh diều

GIÁO ÁN WORD LỚP 12 CHÂN TRỜI SÁNG TẠO

Giáo án toán 12 chân trời sáng tạo
Giáo án đại số 12 chân trời sáng tạo
Giáo án hình học 12 chân trời sáng tạo

Giáo án sinh học 12 chân trời sáng tạo
Giáo án hoá học 12 chân trời sáng tạo
Giáo án vật lí 12 chân trời sáng tạo

Giáo án ngữ văn 12 chân trời sáng tạo
Giáo án lịch sử 12 chân trời sáng tạo
Giáo án kinh tế pháp luật 12 chân trời sáng tạo
Giáo án âm nhạc 12 chân trời sáng tạo

Giáo án Tin học 12 - Định hướng Khoa học máy tính chân trời sáng tạo
Giáo án Tin học 12 - Định hướng Tin học ứng dụng chân trời sáng tạo
Giáo án hoạt động trải nghiệm hướng nghiệp 12 chân trời sáng tạo bản 1
Giáo án hoạt động trải nghiệm hướng nghiệp 12 chân trời sáng tạo bản 2

GIÁO ÁN POWERPOINT LỚP 12 CHÂN TRỜI SÁNG TẠO

 
 

GIÁO ÁN CHUYÊN ĐỀ LỚP 12 CHÂN TRỜI SÁNG TẠO

Giáo án chuyên đề ngữ văn 12 chân trời sáng tạo
Giáo án chuyên đề toán 12 chân trời sáng tạo
Giáo án chuyên đề kinh tế pháp luật 12 kết nối tri thức

Giáo án chuyên đề vật lí 12 chân trời sáng tạo
Giáo án chuyên đề hoá học 12 chân trời sáng tạo
Giáo án chuyên đề sinh học 12 chân trời sáng tạo

Giáo án chuyên đề lịch sử 12 chân trời sáng tạo
Giáo án chuyên đề địa lí 12 chân trời sáng tạo
Giáo án chuyên đề âm nhạc 12 chân trời sáng tạo

Giáo án chuyên đề Tin học 12 - Định hướng Tin học ứng dụng chân trời sáng tạo
Giáo án chuyên đề Tin học 12 - Định hướng Khoa học máy tính chân trời sáng tạo

GIÁO ÁN POWERPOINT CHUYÊN ĐỀ LỚP 12 CHÂN TRỜI SÁNG TẠO

 
 

GIÁO ÁN DẠY THÊM LỚP 12 CHÂN TRỜI SÁNG TẠO

Giáo án dạy thêm ngữ văn 12 chân trời sáng tạo
Giáo án powerpoint dạy thêm ngữ văn 12 chân trời sáng tạo
Giáo án dạy thêm toán 12 chân trời sáng tạo
Giáo án powerpoint dạy thêm toán 12 chân trời sáng tạo

Tài liệu giảng dạy

Xem thêm các bài khác

I. GIÁO ÁN WORD KHOA HỌC MÁY TÍNH 12 CHÂN TRỜI SÁNG TẠO

GIÁO ÁN WORD CHỦ ĐỀ A: MÁY TÍNH VÀ XÃ HỘI TRI THỨC

GIÁO ÁN WORD CHỦ ĐỀ D: ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG

GIÁO ÁN WORD CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY

II. GIÁO ÁN POWERPOINT KHOA HỌC MÁY TÍNH 12 CHÂN TRỜI SÁNG TẠO

GIÁO ÁN POWERPOINT CHỦ ĐỀ A: MÁY TÍNH VÀ XÃ HỘI TRI THỨC

GIÁO ÁN POWERPOINT CHỦ ĐỀ D: ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG 

GIÁO ÁN POWERPOINT CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY

III. GIÁO ÁN CHUYÊN ĐỀ KHOA HỌC MÁY TÍNH 12 CHÂN TRỜI SÁNG TẠO 

GIÁO ÁN CHUYÊN ĐỀ 1: TÌM HIỂU MỘT VÀI KIỂU DỮ LIỆU TUYẾN TÍNH 

GIÁO ÁN CHUYÊN ĐỀ 2: TÌM HIỂU CÂY TÌM KIẾM NHỊ PHÂN TRONG SẮP XẾP VÀ TÌM KIẾM

GIÁO ÁN CHUYÊN ĐỀ 3: TÌM HIỂU KĨ THUẬT DUYỆT ĐỒ THỊ VÀ ỨNG DỤNG 

Chat hỗ trợ
Chat ngay