Giáo án điện tử Khoa học máy tính 12 kết nối Bài 12: Tạo biểu mẫu

CHÀO ĐÓN CẢ LỚP

ĐẾN BÀI HỌC MỚI!

KHỞI ĐỘNG

Lấy ý kiến phản hồi

Tạo tài khoản Facebook

Các trang web thường thu thập dữ liệu từ người dùng như thế nào?

KHỞI ĐỘNG

Các trang web thường sử dụng biểu mẫu để thu thập dữ liệu từ người dùng.

BÀI 12:

TẠO BIỂU MẪU

NỘI DUNG BÀI HỌC

1. Biểu mẫu web

2. Thực hành tạo biểu mẫu

1

BIỂU MẪU WEB

Hoạt động 1: Tương tác bằng biểu mẫu web

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 đó.

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.

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

THẢO LUẬN NHÓM

1. BIỂU MẪU WEB

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.

Khái niệm

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

Đăng kí tài khoản.

Mua sắm.

Tìm kiếm thông tin.

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.

Cấu trúc chung của biểu mẫu web được tạo bởi thẻ <form>:

Các phần tử của biểu mẫu thường dùng: input, label, select, textarea; ngoài ra còn có fieldset, legend, datalist,...

• label: định nghĩa nhãn, có cấu trúc như sau:

• input: xác định vùng nhập dữ liệu. Phần tử input xác định bởi thẻ đơn, có cấu trúc như sau:

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

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.
• Cấu trúc:

• textarea:
• Xác định một vùng nhập văn bản có nhiều dòng và cột.
• Cấu trúc:

Lưu ý: Phần Nội_dung được hiển thị trong vùng nhập, nếu không để Nội_dung trong thẻ, vùng nhập văn bản là vùng trắng.

• fieldset:
• Nhóm các phần tử có liên quan trong biểu mẫu bằng cách vẽ một hình chữ nhật bao quanh các phần tử đặt trong cặp thẻ <fieldset>...</fieldset> .
• Có thể thêm tên cho nhóm phần tử bằng cách đặt phần tử legend trong phần tử fieldset tương ứng.

Ví dụ:

Đoạn mã HTML

Kết quả hiển thị trên trình duyệt

Nguyên lí hoạt động và cách thức làm việc của biểu mẫu trên web:

Cách thức làm việc chung cho các biểu mẫu web nói chung:

Câu hỏi củng 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.

Câu 1:

• Radio và checkbox: 2 kiểu trong phần tử input / select: 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).
• Số lựa chọn không quá 7: 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 giá trị dưới dạng có/không.

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

----------------------Còn tiếp---------------------