Giáo án Tin học ứng dụng 12 chân trời Bài F5: Tạo biểu mẫu trong trang web

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.127 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.127 và 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.127 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 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.130 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.127 – 130 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ên và Lớ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>

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: Tin học ứng dụng 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).