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.