Nội dung chính Tin học ứng dụng 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.

Bảng 12.1. Một số loại dữ liệu (type) thông dụng

2. THỰC HÀNH TẠO BIỂU MẪU

Nhiệm vụ 1: Tạo biểu mẫu

- Bước 1: HS tạo được tiêu đề cho biểu mẫu.

- Bước 2: HS tạo được một biểu mẫu bằng cặp thẻ <form></form>.

- Bước 3: HS tạo được ba cặp label và input trong cặp thẻ <form>.

Nhiệm vụ 2: Tạo biểu mẫu

- Bước 1: HS xác định được các thông tin trong biểu mẫu.

- Bước 2: HS tạo được các phần tử của biểu mẫu.

- Bước 3: HS bổ sung thêm tiêu đề bằng thẻ <h1> và nhóm các thông tin bằng thẻ <fieldset>.