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

I - MỤC TIÊU BÀI HỌC

• Phát biểu được khái niệm biểu mẫu.

• Mô tả được một số điều khiển hỗ trợ nhập dữ liệu trên trang web.

• Nêu được một số lưu ý trong thiết kế biểu mẫu.

II - KIẾN THỨC CẦN GHI NHỚ

1. NHẬP DỮ LIỆU THÔNG QUA BIỂU MẪU

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

- HTML định nghĩa phần tử form để tạo biểu mẫu.

- Phần tử form có cú pháp khai báo như sau:

Trong đó:

+ Thuộc tính action xác định tài nguyên web sẽ tiếp nhận và xử lí dữ liệu mà người dùng vừa gửi đến máy chủ. Tài nguyên web thường là các chương trình được viết bằng các ngôn ngữ lập trình như: Java, PHP, Python,....

+ Thuộc tính method xác định phương thức gửi dữ liệu đến máy chủ để xử lí, thường có giá trị là GET hoặc POST:

• Nếu không khai báo, phương thức GET được sử dụng. Sử dụng GET, dữ liệu gửi đến máy chủ xuất hiện trong ô địa chỉ của trình duyệt và bị hạn chế về dung lượng.

• Sử dụng POST, dữ liệu gửi đến máy chủ không xuất hiện trong ô địa chỉ của trình duyệt và không bị hạn chế về dung lượng nên POST thường được dùng để gửi dữ liệu có dung lượng lớn.

- Khi kết thúc quá trình nhập dữ liệu, người dùng cần nháy chuột vào nút lệnh có chức năng gửi dữ liệu trên biểu mẫu để dữ liệu nhập vào được gửi đến máy chủ web. 

- Sau khi tiếp nhận, xử lí dữ liệu, máy chủ web gửi trả kết quả và 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 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.

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

Ngoài các điều khiển nhập kí tự, HTML còn cung cấp một số điều khiển nhập dữ liệu theo mẫu cho sẵn dạng lựa chọn như nút chọn (radio) và hộp kiểm (checkbox).

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

+ Sử dụng trong trường hợp cho người dùng chọn lựa một mục trong danh sách mục gợi ý. 

+ Được định nghĩa thông qua phần tử input có 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.

- Danh sách chọn hộp kiểm (checkbox):

+ Cho phép người nhập dữ liệu có thể chọn nhiều hoặc tất cả các mục trong danh sách các mục chọn.

+ Được định nghĩa thông qua phần tử input có thuộc tính type=“checkbox”.”

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

- HTML cho phép tạo nút lệnh submit để gửi dữ liệu được nhập trên biểu mẫu về máy chủ web. 

- Cú pháp khai báo nút submit:

Trong đó:

+ Thuộc tính value nếu được khai báo sẽ cung cấp nhãn của nút, trong trường hợp không khai báo, nút trên biểu mẫu có nhãn mặc định là “Submit”.

3. MỘT SỐ LƯU Ý TRONG THIẾT KẾ BIỂU MẪU

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. 

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

- Nếu biểu mẫu có nhiều nút lệnh, nên sắp xếp nút lệnh theo hàng ngang, ưu tiên nút lệnh có tần suất sử dụng nhiều ở bên trái.