TRANG CHỦ

Tin học 12 - Bài 12: Tạo biểu mẫu (HTML Form)

Tóm tắt cấu trúc thẻ <form>, các phần tử nhập liệu phổ biến (label, input, select, textarea, fieldset, legend) và hướng dẫn thực hành – luyện tập để thu thập, gửi dữ liệu an toàn.

1. Mục tiêu & cấu trúc biểu mẫu web

Mục tiêu

  • Biết cấu trúc cơ bản của biểu mẫu web (thẻ <form> và các phần tử form).
  • Sử dụng được các phần tử: label, input (với các type thông dụng), select/option, textarea, fieldset/legend.

Khái niệm & vai trò (trang 67)

Biểu mẫu (form) dùng để thu thập dữ liệu người dùng và gửi tới chương trình xử lí (thường trên máy chủ).

  • Phần hiển thị trên trang (HTML).
  • Ứng dụng/script xử lí dữ liệu (ngoài phạm vi HTML).

Thẻ tạo form

Khung cơ bản:

<form>
  ...các phần tử của biểu mẫu...
</form>

Ghi nhớ: Phần tử thường dùng: input, label, select, textarea; có thể thêm fieldset, legend, datalist (trang 67).
form action method input select

2. Các phần tử chính trong biểu mẫu

a) label (trang 67)

Mục đích: tạo nhãn cho ô nhập; nhấp vào nhãn sẽ focus vào ô nhập liên kết qua for ↔ id.

Cấu trúc:

<label for="ma_id_input">Tên nhãn</label>

b) input (trang 68)

Ô nhập liệu đa dụng; cần thêm nhãn bằng label.

Cấu trúc & thuộc tính:

<input id="ma_id" type="loai_input" name="ten_input">

  • name: tên trường dùng khi xử lí dữ liệu.
  • type: xác định kiểu dữ liệu/ô nhập.

Type thông dụng (Bảng 12.1)

  • text, password, number.
  • radio (chọn 1 trong nhiều cùng name), checkbox (có/không, nhiều chọn).
  • button (nút bấm, cần value), file (chọn tệp), submit (gửi form, thường kèm value).
Ghi nhớ: Với radio/checkbox, thường thêm value để biết lựa chọn. Input chỉ là ô nhập; muốn có nhãn, phải dùng kèm label (trang 68).

c) select/option (trang 69)

Tạo danh sách thả xuống cho người dùng chọn một giá trị.

Cấu trúc:

<select id="ma_id" name="ten_select">
  <option value="gia_tri">Nhãn hiển thị</option>
</select>

Ví dụ “Lớp 10/11/12” như Hình 12.1.

d) textarea (trang 69)

Tạo vùng nhập văn bản nhiều dòng, có rows, cols; nội dung giữa cặp thẻ là giá trị mặc định.

e) fieldset/legend (trang 69)

Nhóm các phần tử liên quan trong một khung; legend đặt tiêu đề nhóm.

Ví dụ nhóm thông tin:

<fieldset>
  <legend>Thông tin cá nhân</legend>
  ...các cặp label - input...
</fieldset>

3. Thực hành tạo biểu mẫu

Nhiệm vụ 1 – Biểu mẫu “Thông tin món ăn” (Hình 12.2, trang 69)

  1. B1: Thêm tiêu đề (<h2>).
  2. B2: Tạo <form>.
  3. B3: Tạo các cặp label – input (đặt id để liên kết với label; chèn <br> để xuống dòng nếu cần).

Nhiệm vụ 2 – Biểu mẫu “Đăng kí môn thi tốt nghiệp” (Hình 12.3, trang 70)

Trường cần có & gợi ý kiểu:

  • Họ và tên (text), CCCD (number), Ngày sinh (date), Giới tính (radio hoặc select).
  • Môn Toán/Văn/Ngoại ngữ (checkbox), tổ hợp KHTN/KHXH (radio hoặc select).
  • Nút gửi (submit).
Mẹo trình bày: Có thể thêm <h1> và nhóm các trường bằng <fieldset> cho dễ nhìn.

4. Luyện tập - Vận dụng

Luyện tập

  • Tạo lần lượt các phần tử form và input với nhiều type; nêu 3 ví dụ cho mỗi loại.

Vận dụng (trang 70)

  • Tạo form đăng kí CLB.
  • Sửa mã nguồn bài trước để thêm liên kết “Đăng kí” hiển thị form trong <iframe>.
Kiểm tra: Đảm bảo liên kết label-id, đặt name cho các trường để gửi dữ liệu và chọn type phù hợp yêu cầu nhập liệu.