Nội dung chính Khoa học máy tính 12 kết nối bài 12: Tạo biểu mẫu

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

1. BIỂU MẪU WEB

- Khái niệm: Biểu mẫu web hay phần tử form của HTML là một công cụ dùng để thu thập dữ liệu. 

- Sử dụng biểu mẫu: 

+ Đăng kí tài khoản.

+ Mua hàng. 

+ Tìm kiếm thông tin.

…

- Thành phần: Biểu mẫu web đầy đủ có hai thành phần:

+ Biểu mẫu hiển thị trên web: được tạo thành bởi các đoạn mã HTML. Được sử dụng để người dùng nhập và gửi thông tin.

+ Các ứng dụng hoặc script xử lí dữ liệu: thường nằm trên máy chủ, không thuộc phạm vi ngôn ngữ HTML.

- Biểu mẫu web được tạo bởi thẻ <form> có cấu trúc chung như sau:

- Các phần tử của biểu mẫu thường dùng là: input, label, select, textarea; ngoài ra còn có các phần tử khác như fieldset, legend, datalist,...

+ label: định nghĩa nhãn, có cấu trúc như sau:

Khi nháy chuột vào Tên_nhãn, con trỏ chuột sẽ được đưa vào vùng của phần tử input được xác định bởi thuộc tính for tương ứng.

+ input: xác định vùng nhập dữ liệu. Phần tử input xác định bởi thẻ đơn, có cấu trúc như sau:

Trong đó:

• Thuộc tính name được sử dụng để tham chiếu tới dữ liệu đã nhập khi thực hiện tính toán hay gửi tới máy chủ.

• Thuộc tính type xác định loại dữ liệu mà phần tử input chứa. 

Lưu ý: Phần tử input chỉ dùng để nhập dữ liệu, muốn có thông tin về nội dung nhập phải tạo kèm label.

Ngoài ra còn có một số kiểu dữ liệu (type) khác như: 

+ select: 

• Cho phép người dùng chọn một trong các lựa chọn trong danh sách thả xuống. 

• Chứa nhiều thẻ option, mỗi cặp định nghĩa một lựa chọn trong danh sách. 

• Cấu trúc:

+ textarea: 

• Xác định một vùng nhập văn bản có nhiều dòng và cột. 

• Cấu trúc:

Lưu ý: Phần Nội_dung được hiển thị trong vùng nhập, nếu không để Nội_dung trong thẻ, vùng nhập văn bản là vùng trắng.

+ fieldset: 

• Nhóm các phần tử có liên quan trong biểu mẫu bằng cách vẽ một hình chữ nhật bao quanh các phần tử đặt trong cặp thẻ <fieldset>...</fieldset>.

• Có thể thêm tên cho nhóm phần tử bằng cách đặt phần tử legend trong phần tử fieldset tương ứng.

- Nguyên lí hoạt động và cách thức làm việc của biểu mẫu trên web:

Cách thức làm việc chung cho các biểu mẫu web nói chung:

1. Một người dùng web, tên là An, truy cập vào trang web của thư viện quận để đăng kí thành viên tại thư viện quận. Trình duyệt hiển thị biểu mẫu đăng kí tài khoản sử dụng gồm 4 trường nhập thông tin và một nút Đăng kí.

2. An muốn đăng kí thành viên nên nhập thông tin họ tên, căn cước công dân, tên trường bạn đang theo học và email của mình rồi thực hiện gửi đi bằng cách nháy chuột vào Đăng kí.

3. Trình duyệt sẽ thu thập thông tin, mã hoá rồi gửi tới ứng dụng web trên máy chủ.

4. Ứng dụng web trên máy chủ sẽ nhận thông tin, sau đó xử lí nó. Ví dụ như kiểm tra thông tin rồi điền vào CSDL người dùng của thư viện.

5. Ứng dụng web sau khi xử lí sẽ thực hiện trả về phản hồi. Phản hồi được trả về sẽ phụ thuộc vào mục đích, nội dung của biểu mẫu. Ở đây, phản hồi có thể trả về một trang web cảm ơn đã đăng kí thông tin. Trong một số trường hợp khác, có thể tải lại và cập nhật nội dung cho trang biểu mẫu hoặc có thể chuyển sang một trang web khác với nội dung phù hợp.

6. Máy chủ gửi phản hồi của ứng dụng web cho trình duyệt. Trong ví dụ này An sẽ nhìn thấy biểu mẫu đã hoạt động và bạn ấy đã được thêm vào danh sách người dùng.