Nội dung chính Khoa học máy tính 12 Chân trời bài F5: Tạo biểu mẫu trong trang web

CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH 

BÀI F5: TẠO BIỂU MẪU TRONG TRANG WEB

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

- Khái niệm: 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.

+ Chọn một hay nhiều phương án.

+ Nháy chuột vào nút nhấn.

…

Ví dụ 1: Khi mua sắm trực tuyến trên trang web, người dùng phải tương tác với biểu mẫu thanh toán như nhập số lượng hàng cần mua, nhập địa chỉ nhận hàng, chọn phương thức thanh toán,… 

Hình 1. Biểu mẫu thanh toán mua sắm trực tuyến

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

- HTML sử dụng thẻ <form> để tạo biểu mẫu web.

- Cú pháp thẻ <form>:

Trong đó:

+ 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 được gửi tới máy chủ dưới dạng chuỗi truy vấn được gắn vào URL ngay sau “địa_chỉ_trang_
  nhận_dữ_liệu” trong thuộc tính action. 

• Giới hạn dữ liệu được gửi tuỳ vào trình duyệt và máy chủ, thường là 255 kí tự.

• Ví dụ:

• POST: 

• Dữ liệu được gửi đến máy chủ dưới dạng gói tin.

• Dữ liệu không bị giới hạn kích thước, không hiển thị trực tiếp trong URL.

• Ví dụ:

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

- Một trong những thành phần nhập liệu phổ biến của biểu mẫu là hộp văn bản, cho phép nhập văn bản chỉ gồm một dòng duy nhất. Để tạo thành phần này, HTML sử dụng thẻ <input>.

Ví dụ 2: Tệp gopy.html với đoạn mã HTML tạo một biểu mẫu chứa hai hộp văn bản dùng để nhập Họ tên và Lớp (Hình 2).

Hình 2. Biểu mẫu nhập Họ tên và Lớp

Trong đoạn mã HTML trên:

+ Thẻ <label>:

• Được sử dụng để hiển thị nhãn tên cho các thẻ khác của biểu mẫu như <input>, <textarea>,...

• Có thuộc tính for, giá trị của thuộc tính này phải đồng nhất với giá trị của

thuộc tính id trong thẻ <input> đi cùng. 

+ Thẻ <input> có các thuộc tính:

• type: được chỉ định là text cho biết hộp văn bản chỉ cho phép nhập một dòng.

• id: chỉ định mã định danh của thẻ <input> nhằm phân biệt với các thẻ <input> khác. 

 Trong một biểu mẫu, thuộc tính id thường được dùng để xác định một phần tử cụ thể để thao tác với CSS hoặc JavaScript.

• name: xác định dữ liệu của phần tử khi gửi biểu mẫu lên máy chủ.

- Bên cạnh giá trị text, thuộc tính type của thẻ <input> còn có một số giá trị sau:

Bảng 1. Các giá trị của thuộc tính type trong thẻ <input>

Ví dụ 3: Thêm đoạn mã HTML vào thẻ <form> trong Ví dụ 2 để tạo hai nút tròn giúp học sinh chọn một trong hai định hướng môn Tin học: Tin học ứng dụng hoặc Tin học ứng dụng (Hình 3). Khi người dùng chọn một phương án thì các phương án còn lại sẽ tự động huỷ chọn.

Hình 3. Hai nút tròn cho phép chọn một trong hai phương án

Trong đoạn mã HTML trên:

+ Thuộc tính name của hai thẻ <input> được chỉ định cùng một giá trị (dinhhuong) để hai nút tròn cùng thuộc một nhóm phương án chung. 

Ví dụ 4: Thêm đoạn mã HTML vào thẻ <form> trong Ví dụ 2 để tạo ba hộp kiểm dùng để chọn các câu lạc bộ đang tham gia (Hình 4). Hộp kiểm cho phép đánh dấu chọn nhiều phương án cùng một lúc.

Hình 4. Ba hộp kiểm cho phép đánh

dấu chọn nhiều phương án

Ví dụ 5: Thêm đoạn mã HTML vào thẻ <form> trong Ví dụ 2 để tạo một hộp văn bản nhập ý kiến đồng thời tạo thêm một nút nhấn Gửi (Hình 5).

Hình 5. Hộp văn bản cho phép nhập nhiều dòng và một nút nhấn để gửi

Trong đoạn mã HTML trên:

+ Thẻ <textarea>:

• Được dùng để tạo hộp văn bản cho phép nhập nhiều dòng.

• Có thuộc tính rows và cols để chỉ định số dòng và số cột của khung văn bản khi hiển thị.

+ Thẻ <button>:

• Giúp người dùng gửi thông tin sau khi hoàn thành biểu mẫu. 

• Nếu thuộc tính type của thẻ <button> được chỉ định là submit thì trang web sẽ gửi dữ liệu của biểu mẫu về trang nhận dữ liệu. 

Nếu không muốn gửi dữ liệu mà chỉ thực thi hàm, có thể chỉ định giá trị button (trùng tên với thẻ <button>) cho thuộc tính type hoặc giá trị reset để xoá dữ liệu hiện hành và đưa biểu mẫu về trạng thái mặc định ban đầu.

3. Thực hành