BÀI 12. TẠO BIỂU MẪU
1. BIỂU MẪU WEB
Biểu mẫu (form) là công cụ dùng để thu thập dữ liệu từ người dùng để xử lý tại chỗ hoặc gửi về máy chủ. Một biểu mẫu đầy đủ gồm phần hiển thị (HTML) và phần xử lý dữ liệu (script/server).
Biểu mẫu được tạo bởi cặp thẻ <form>...</form>.
a) Các phần tử cơ bản của biểu mẫu
Phần tử <label>: Dùng để định nghĩa nhãn cho các vùng nhập liệu, giúp người dùng biết cần nhập gì.
Phần tử <input>: Xác định vùng để người dùng nhập dữ liệu. Đây là thẻ đơn, có các thuộc tính quan trọng như id (định danh), name (tham chiếu khi xử lý), và type (loại dữ liệu).
b) Một số loại dữ liệu (type) thông dụng của input
- text: Tạo trường nhập văn bản một dòng.
- password: Nhập mật khẩu (ký tự bị ẩn đi).
- radio: Chọn duy nhất một giá trị trong nhóm.
- checkbox: Ô lựa chọn cho phép chọn nhiều giá trị (có hoặc không).
- button: Tạo một nút bấm.
- file: Chọn tệp tin từ máy tính để tải lên.
- submit: Nút đặc biệt để gửi toàn bộ dữ liệu trong form về máy chủ.
c) Các phần tử nhập liệu khác
Phần tử <select>: Tạo danh sách thả xuống để người dùng chọn. Các lựa chọn bên trong được định nghĩa bằng thẻ <option>.
Phần tử <textarea>: Vùng nhập văn bản nhiều dòng và nhiều cột.
Phần tử <fieldset> và <legend>: Nhóm các phần tử liên quan lại và đặt tên cho nhóm đó.
2. THỰC HÀNH TẠO BIỂU MẪU
Trong phần này, các em sẽ thực hiện hai nhiệm vụ chính để làm quen với việc xây dựng form thực tế:
a) Nhiệm vụ 1: Tạo biểu mẫu nhập thông tin món ăn
- Yêu cầu: Tạo form gồm Tên món ăn, Đơn giá, Số lượng.
- Sử dụng thẻ <h2> làm tiêu đề, dùng thẻ <br> để ngắt dòng cho các label.
b) Nhiệm vụ 2: Tạo biểu mẫu đăng ký môn thi tốt nghiệp
- Yêu cầu: Phân tích các loại dữ liệu cần thiết như: Họ tên (text), Ngày sinh (date), Giới tính (radio), Môn thi (checkbox), Tổ hợp (select/radio) và Nút gửi (submit).
- Sử dụng thẻ <fieldset> để bao quanh toàn bộ các trường nhập liệu giúp giao diện chuyên nghiệp hơn.
