Giáo án và PPT Tin học ứng dụng 12 cánh diều bài 6: Tạo biểu mẫu

BÀI 6: TẠO BIỂU MẪU

A. KHỞI ĐỘNG

HS dựa vào hiểu biết để trả lời câu hỏi Khởi động tr.59 SGK.

B. HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC

Hoạt động 1: Nhập dữ liệu thông qua biểu mẫu

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

Dự kiến sản phẩm:

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

Hoạt động 2: Một số điều khiển hỗ trợ nhập dữ liệu thông dụng và nút lệnh

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

Dự kiến sản phẩm:

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

Hoạt động 3: Một số lưu ý trong thiết kế biểu mẫu

Một số lưu ý trong thiết kế biểu mẫu 

Dự kiến sản phẩm:

Khi khai báo các điều khiển trên biểu mẫu, cần lưu ý:

- Chọn điều khiển nhập dữ liệu phù hợp với loại thông tin cần thu thập. 

Ví dụ: Để người dùng chọn được nhiều mục thì nên sử dụng checkbox.

- Thứ tự các điều khiển nên sắp xếp từ trái sang phải, từ trên xuống dưới, gộp nhóm phù hợp với thứ tự dữ liệu người dùng cần nhập. 

Ví dụ: Nên đặt các nút lệnh ở cuối biểu mẫu vì thao tác gửi dữ liệu thường được thực hiện sau khi nhập xong dữ liệu…

C. HOẠT ĐỘNG LUYỆN TẬP

Câu 1 (Câu 1 phần Câu hỏi tự kiểm tra SGK tr.64). Khai báo nào được dùng để tạo điều khiển nhập dữ liệu ô text trong biểu mẫu?

A. <input type=“text” name=“txt”>.

B. <textfield name=“txt”>.

C. <textinput name=“txt”>.

D. <input type=“txtfield” name=“txt”>.

Câu 2. Điều khiển nhập dữ liệu nào sau đây được sử dụng trong trường hợp cho người dùng lựa chọn một mục trong danh sách?

A. label.

B. checkbox.

C. radio.

D. textarea.

Câu 3. Phương án nào sau đây là một thuộc tính của phần tử textarea?

A. columns.

B. type.

C. value.

D. rows.

Câu 4. Khai báo nào sau đây được dùng để tạo nút lệnh gửi dữ liệu có nhãn là OK?

A. <input type=“submit” name=“OK”>.

B. <button type=“submit” value=“OK”>.

C. <input type=“submit” name=“button” value=“OK”>.

D. <submit type=“button” name=“button” value=“OK”>.

Câu 5. Phát biểu nào sau đây đúng?

A. Khi tạo biểu mẫu, nếu không khai báo giá trị cho thuộc tính method thì phương thức POST sẽ được sử dụng.

B. Thuộc tính name của các nút chọn radio button phải được khai báo như nhau.

C. Phần tử input có cả thẻ mở và thẻ đóng.

D. Khi tạo ô text nhập định dạng mật khẩu, mỗi kí tự nhập trong ô text thường được thay thế bằng dấu * trên màn hình trình duyệt web giúp bảo mật thông tin.

Dự kiến sản phẩm:

D. HOẠT ĐỘNG VẬN DỤNG

HS hoàn thành hoạt động Vận dụng SGK tr.64.