Giáo án Khoa học máy tính 12 Kết nối bài 12: 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 hoạt động cá nhân, đọc Hoạt động 1 – Tương tác bằng biểu mẫu web SGK tr.67 và trả lời câu hỏi:

Mô tả các bước mà em đã thực hiện khi đăng kí tài khoản trên một trang web nào đó.

- GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi:

+ Biểu mẫu web là gì? 

+ Biểu mẫu được dùng để làm gì?

+ Biểu mẫu web đầy đủ bao gồm mấy thành phần?

+ HTML cung cấp thẻ nào để tạo biểu mẫu?

+ Biểu mẫu thường dùng những phần tử HTML nào? Mỗi phần tử có chức năng và cấu trúc như thế nào?

- GV đưa ra ví dụ cụ thể để HS hiểu nguyên lí hoạt động và cách thức làm việc của biểu mẫu trên web.

- 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 củng cố kiến thức SGK tr.69:

Câu 1. Điểm khác biệt giữa radio, checkbox và select là gì?

Câu 2. Hãy viết câu lệnh để thêm một nút có tên “Quên mật khẩu” vào 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 1 SGK tr.67 – 69 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 1 SGK tr.67:

Các bước đăng kí tài khoản trên một trang web:

+ Nhập tên, địa chỉ email, số điện thoại,…

+ Nhập mật khẩu cho tài khoản, thông tin được che đi để bảo mật.

+ Nhập lại mật khẩu.

+ Xác thực thông tin tài khoản.

Hướng dẫn trả lời Câu hỏi củng cố kiến thức SGK tr.69:

Câu 1. Điểm khác biệt của radio, checkbox và select:

+ Radio và checkbox là hai kiểu trong phần tử input còn select là phần tử select.

+ Radio và select chỉ chọn một giá trị trong các giá trị sẵn có nhưng khác nhau về cách biểu diễn (không gian sử dụng trong biểu mẫu). Thông thường:

• Số lựa chọn không quá 7: người thiết kế thường dùng radio.

• Số lựa chọn lớn hơn 7: thường dùng select.

+ Select chỉ tập trung vào lựa chọn được chọn, radio phân bố sự tập trung đều nhau.

+ Checkbox dùng để chọn nhiều giá trị, mỗi giá trị dưới dạng có/không.

Câu 2. 

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:

Người dùng web cung cấp thông tin cho trang web thông qua biểu mẫu. Biểu mẫu được định nghĩa bởi thẻ chứa nhiều loại phần tử tuỳ theo yêu cầu về thông tin cần thu thập, trong đó loại phần tử quan trọng nhất là input.

1. BIỂU MẪU WEB

- Khái niệm: Biểu mẫu web hay phần tử form của HTML là một công cụ dùng để thu thập dữ liệu. 

- Sử dụng biểu mẫu: 

- Thành phần: Biểu mẫu web đầy đủ có hai thành phần:

+ Biểu mẫu hiển thị trên web: được tạo thành bởi các đoạn mã HTML. Được sử dụng để người dùng nhập và gửi thông tin.

+ Các ứng dụng hoặc script xử lí dữ liệu: thường nằm trên máy chủ, không thuộc phạm vi ngôn ngữ HTML.

- Biểu mẫu web được tạo bởi thẻ <form> có cấu trúc chung như sau:

Trong đó:

• Thuộc tính name được sử dụng để tham chiếu tới dữ liệu đã nhập khi thực hiện tính toán hay gửi tới máy chủ.

• Thuộc tính type xác định loại dữ liệu mà phần tử input chứa. 

Lưu ý: Phần tử input chỉ dùng để nhập dữ liệu, muốn có thông tin về nội dung nhập phải tạo kèm label.

Bảng 12.1. Một số loại dữ liệu (type) thông dụng

Ngoài ra còn có một số kiểu dữ liệu (type) khác như: 

+ select: 

• Cho phép người dùng chọn một trong các lựa chọn trong danh sách thả xuống. 

• Chứa nhiều thẻ option, mỗi cặp định nghĩa một lựa chọn trong danh sách.