Lý thuyết Tin học 12 Bài 6 (Cánh diều): Tạo biểu mẫu

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

1. Nhập dữ liệu thông qua biểu mẫu

Biểu mẫu trên trang web là giao diện thu nhận thông tin từ người dùng, 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ác điều khiển này được thiết kế phù hợp với nhiều kiểu dữ liệu, giúp người dùng dễ dàng nhập thông tin và giảm sai sót. Biểu mẫu còn có các nút lệnh để người dùng xác nhận và gửi dữ liệu về máy chủ web.

Sau khi hoàn tất việc nhập dữ liệu, người dùng cần nháy chuột vào nút lệnh gửi dữ liệu trên biểu mẫu. Điều này sẽ gửi dữ liệu nhập vào đến máy chủ web. Sau khi tiếp nhận và xử lý dữ liệu, máy chủ web gửi trả kết quả, thường là một trang web khác.

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> với cú pháp sau:

<input type="text" name="Tên_điều_khiển" value="Giá trị">

Các thuộc tính:

- name: Tên điều khiển, giúp 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 này không bắt buộc nhưng thường được sử dụng.

- value: Giá trị mặc định của ô text khi hiển thị trên trình duyệt web.

Khai báo này giúp xác định và xử lý dữ liệu nhập từ người dùng một cách hiệu quả.

b) Nhập dữ liệu bằng cách lựa chọn:

Trong một số trường hợp, dữ liệu nhập vào được xác định trước bằng cách cung cấp các phương án để người dùng lựa chọn.

Danh sách các nút chọn (radio button):

- Sử dụng khi cần cho người dùng chọn một mục trong danh sách gợi ý.

- Được khai báo bằng phần tử <input> với 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> riêng lẻ.

Chú ý:

- Thuộc tính name của các nút chọn phải được khai báo giống nhau để đảm bảo người dùng chỉ có thể chọn một mục trong danh sách.

Điều này giúp người dùng lựa chọn dễ dàng và đảm bảo dữ liệu nhập vào được quản lý hiệu quả.

c) Nút lệnh gửi dữ liệu:

HTML cho phép tạo nút lệnh (thường gọi là nút submit) để gửi dữ liệu từ biểu mẫu về máy chủ web. Nút submit được khai báo như sau:

<input type="submit" name="Tên_điều_khiển" [value="Giá trị"

Thuộc tính:

- name: Tên điều khiển của nút submit.

- value: Nếu được khai báo, thuộc tính này sẽ cung cấp nhãn của nút. Nếu không khai báo, nút trên biểu mẫu sẽ có nhãn mặc định là "Submit".

Nút submit giúp gửi dữ liệu nhập từ biểu mẫu đến máy chủ web để xử lý.

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

Khi thiết kế biểu mẫu, cần lưu ý:

- Chọn điều khiển nhập dữ liệu phù hợp:

- Ví dụ, sử dụng checkbox để người dùng có thể chọn nhiều mục.

- Sắp xếp thứ tự các điều khiển hợp lý:

- Thứ tự từ trái sang phải, từ trên xuống dưới.

- Gộp nhóm theo thứ tự dữ liệu người dùng cần nhập.

- Đặt các nút lệnh ở cuối biểu mẫu vì thao tác gửi dữ liệu thường thực hiện sau khi nhập xong.

- Sắp xếp các nút lệnh hợp lý:

- Nếu có nhiều nút lệnh, nên sắp xếp theo hàng ngang.

- Ưu tiên đặt nút lệnh có tần suất sử dụng nhiều ở bên trái.

Những lưu ý này giúp tạo biểu mẫu thân thiện và dễ sử dụng cho người dùng.

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

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: Trong biểu mẫu trên trang web, điều khiển nào thường được sử dụng để người dùng nhập ký tự văn bản?

A. <input type="checkbox">

B. <input type="radio">

C. <input type="text">

D. <input type="submit">

Câu 2: Điều khiển nào trên biểu mẫu cho phép người dùng chọn nhiều mục cùng một lúc?

A. Nút chọn (radio button)

B. Ô văn bản (text box)

C. Hộp kiểm (checkbox)

D. Nút gửi (submit button)

Câu 3: Thuộc tính nào của điều khiển <input type="text"> giúp nhận diện dữ liệu gửi từ biểu mẫu về máy chủ?

A. type

B. value

C. name

D. placeholder

Câu 4: Điều khiển nào được sử dụng để gửi dữ liệu từ biểu mẫu về máy chủ web?

A. <input type="text">

B. <input type="radio">

C. <input type="checkbox">

D. <input type="submit">

Câu 5: Điều nào sau đây không phải là một phần của biểu mẫu trên trang web?

A. Ô văn bản

B. Nút chọn

C. Hộp kiểm

D. Tiêu đề trang

Câu 6: Khi sử dụng các nút chọn (radio button), thuộc tính nào phải giống nhau để đảm bảo người dùng chỉ chọn được một mục?

A. value

B. type

C. name

D. id

Câu 7: Khi nào người dùng cần nhấp vào nút submit trên biểu mẫu?

A. Khi nhập xong dữ liệu vào một ô văn bản

B. Khi muốn hủy bỏ dữ liệu đã nhập

C. Khi muốn gửi dữ liệu về máy chủ

D. Khi muốn lưu dữ liệu trên trang web

Câu 8: Thuộc tính value của <input type="submit"> có tác dụng gì nếu được khai báo?

A. Định nghĩa tên điều khiển

B. Xác định kiểu dữ liệu nhập

C. Cung cấp nhãn cho nút submit

D. Giới hạn số lượng ký tự nhập vào

Câu 9: Việc sắp xếp các điều khiển nhập liệu và nút lệnh hợp lý trên biểu mẫu có tác dụng gì?

A. Tăng tốc độ xử lý của máy chủ

B. Giảm số lượng dữ liệu nhập sai

C. Tăng độ phức tạp của biểu mẫu

D. Giúp người dùng dễ dàng sử dụng biểu mẫu

Câu 10: Trong biểu mẫu, để người dùng dễ dàng lựa chọn và đảm bảo dữ liệu nhập vào được quản lý hiệu quả, cần lưu ý điều gì khi sử dụng các nút chọn?

A. Đặt các nút chọn ở cuối biểu mẫu

B. Chọn điều khiển nhập liệu phù hợp

C. Đảm bảo các thuộc tính name của nút chọn giống nhau

D. Sắp xếp các nút chọn theo hàng ngang

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 khi nói về các điều khiển nhập liệu trong biểu mẫu trên trang web?

a) Ô văn bản (text box) chỉ cho phép nhập một số ký tự hạn chế.

b) Nút chọn (radio button) cho phép người dùng chọn nhiều mục cùng lúc.

c) Hộp kiểm (checkbox) thường được sử dụng để cho phép người dùng chọn nhiều mục.

d) Nút lệnh gửi (submit button) chỉ có thể gửi dữ liệu về máy chủ nếu có thuộc tính value.

Câu 2: Phát biểu sau đây là đúng hay sai khi nói về thiết kế biểu mẫu?

a) Nên sắp xếp các điều khiển từ trái sang phải, từ trên xuống dưới.

b) Chỉ nên sử dụng một loại điều khiển nhập liệu trong một biểu mẫu.

c) Các nút lệnh nên được đặt ở cuối biểu mẫu.

d) Đặt các nút lệnh có tần suất sử dụng nhiều ở bên phải.

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: Câu hỏi: Ô văn bản trong biểu mẫu web thường dùng để nhập loại dữ liệu gì?

Câu 2: Nút chọn (radio button) trong biểu mẫu được sử dụng khi nào?

Câu 3: Tại sao thuộc tính name của các nút chọn trong cùng một nhóm phải giống nhau?