Lý thuyết Tin học 12 Bài F5 (Chân trời sáng tạo): Tạo biểu mẫu trong trang web

Lý thuyết Tin học 12 Bài F5: Tạo biểu mẫu trong trang web

1. Giới thiệu biểu mẫu trong trang web

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 hoặc chọn một phương án, chọn nhiều phương án, nháy chuột vào nút nhấ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,...

2. Tạo một số thành phần trong biểu mẫu

Biểu mẫu web được tạo bằng thẻ <form) như sau:

<form action="địa_chỉ_trang_nhận_dữ_liệu" method="cách_gửi_dữ_liệu", Các thành phần của biểu mẫu

</form>

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 biểu mẫu sẽ gắn kèm vào địa chỉ trang nhận dữ liệu và hiển thị trên thanh địa chỉ của trình duyệt.

POST: Dữ liệu biểu mẫu sẽ được gửi dưới dạng gói tin đến trang nhận dữ liệu.

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.

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,...

Trắc nghiệm: Tạo biểu mẫu trong trang web

PHẦN I. Câu trắc nghiệm nhiều phương án lựa chọn. Thí sinh trả lời từ câu 1 đến câu 10. Mỗi câu hỏi thí sinh chỉ lựa chọn một phương án.

Câu 1: Biểu mẫu web giúp người dùng làm gì?

A. Tương tác với trang web

B. Xem nội dung trang web

C. Tải hình ảnh lên trang web

D. Thay đổi giao diện trang web

Câu 2: Thuộc tính action trong thẻ <form> có tác dụng gì?

A. Chỉ định phương thức gửi dữ liệu

B. Chỉ định địa chỉ trang nhận dữ liệu

C. Chỉ định kiểu dữ liệu

D. Chỉ định độ rộng của biểu mẫu

Câu 3: Phương thức gửi dữ liệu GET có đặc điểm gì?

A. Dữ liệu được mã hóa trước khi gửi

B. Dữ liệu không hiển thị trên thanh địa chỉ

C. Dữ liệu hiển thị trên thanh địa chỉ của trình duyệt

D. Dữ liệu được gửi dưới dạng gói tin

Câu 4: Phương thức gửi dữ liệu POST có đặc điểm gì?

A. Dữ liệu được đính kèm vào URL

B. Dữ liệu hiển thị trên thanh địa chỉ

C. Dữ liệu được gửi dưới dạng gói tin

D. Dữ liệu không được gửi

Câu 5: Nếu không chỉ định thuộc tính method trong thẻ <form>, phương thức gửi dữ liệu mặc định sẽ là gì?

A. POST

B. GET

C. PUT

D. DELETE

Câu 6: Để tạo ô nhập liệu văn bản trong biểu mẫu, chúng ta sử dụng thẻ nào?

A. <textarea>

B. <input type="text">

C. <button>

D. <form>

Câu 7: Thẻ <textarea> thường được sử dụng để làm gì trong biểu mẫu?

A. Tạo nút nhấn

B. Tạo hộp nhập liệu văn bản dài

C. Tạo liên kết

D. Tạo menu lựa chọn

Câu 8: Thuộc tính type="radio" của thẻ <input> tạo ra loại thành phần nào trong biểu mẫu?

A. Nút chọn một

B. Nút chọn nhiều

C. Hộp nhập liệu

D. Hộp kiểm

Câu 9: Để tạo nút gửi dữ liệu trong biểu mẫu, chúng ta sử dụng thẻ nào?

A. <button>

B. <input type="submit">

C. <input type="button">

D. Cả A và B

Câu 10: Nếu thuộc tính action không được chỉ định trong thẻ <form>, dữ liệu sẽ được gửi đến đâu?

A. Trang chủ của website

B. Trang web mặc định của trình duyệt

C. Trang hiện tại

D. Một trang lỗi

PHẦN II. Câu trắc nghiệm đúng Sai. Thí sinh trả lời từ câu 1 đến câu 2. Trong mỗi ý a), b), c), d) ở mỗi câu, thí sinh chọn đúng hoặc sai

Câu 1: Phát biểu sau đây đúng hay sai về biểu mẫu web ?

a) Biểu mẫu web chỉ cho phép nhập liệu văn bản.

b) Biểu mẫu web giúp người dùng tương tác với trang web.

c) Chỉ có một cách để gửi dữ liệu từ biểu mẫu web.

d) Biểu mẫu web không thể chứa nút nhấn.

Câu 2: Phát biểu sau đây đúng hay sai về thuộc tính của thẻ <form> trong biểu mẫu web?

a) Thuộc tính action của thẻ <form> chỉ định địa chỉ trang nhận dữ liệu.

b) Thuộc tính method mặc định là POST nếu không được chỉ định.

c) Dữ liệu gửi bằng phương thức GET sẽ không hiển thị trên thanh địa chỉ của trình duyệt.

d) Thẻ <input> không thể tạo ra các trường nhập liệu dạng radio hoặc checkbox.

PHẦN III. Câu trả lời ngắn. Thí sinh trả lời từ câu 1 đến câu 3

Câu 1: Biểu mẫu web là gì và có những cách thức nào để người dùng tương tác với nó?

Câu 2: Hai phương thức chính để gửi dữ liệu từ biểu mẫu web là gì và chúng hoạt động như thế nào?

Câu 3: Nếu không chỉ định thuộc tính method trong thẻ <form>, dữ liệu sẽ được gửi bằng phương thức nào? Giải thích?