Giáo án Khoa học máy tính 12 Cánh diều bài 6: Tạo biểu mẫu

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:

• Nếu không khai báo, phương thức GET được sử dụng. Sử dụng GET, dữ liệu gửi đến máy chủ xuất hiện trong ô địa chỉ của trình duyệt và bị hạn chế về dung lượng.

• Sử dụng POST, dữ liệu gửi đến máy chủ không xuất hiện trong ô địa chỉ của trình duyệt và không bị hạn chế về dung lượng nên POST thường được dùng để gửi dữ liệu có dung lượng lớn.

- 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 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 
các mục chọn

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