Bài 3. Biểu mẫu và kiểm tra dữ liệu

Khái niệm và lý thuyết

Biểu mẫu là cầu nối giữa người dùng và máy chủ. Khi bấm gửi, trình duyệt gom mọi trường có thuộc tính name thành các cặp tên=giá trị và gửi tới địa chỉ action bằng phương thức method. GET đặt dữ liệu lên địa chỉ URL (hợp cho tìm kiếm), POST gửi trong thân yêu cầu (hợp cho đăng nhập, dữ liệu nhạy cảm, tệp).

Kiểm tra dữ liệu (validation) có hai tầng. Tầng trình duyệt dùng thuộc tính HTML (required, type, min, max, pattern) giúp người dùng sửa lỗi ngay. Tầng máy chủ mới là chốt chặn bảo mật vì tầng trình duyệt có thể bị bỏ qua.

Khả năng truy cập: mỗi ô nhập phải có label gắn qua for/id; nhờ đó trình đọc màn hình đọc được nhãn và bấm vào nhãn sẽ chọn ô. Dùng type đúng (email, tel, number) còn giúp điện thoại hiện bàn phím phù hợp.

Biểu mẫu đăng ký hoàn chỉnh

<form action="/dang-ky" method="post">
  <label for="ten">Họ tên</label>
  <input id="ten" name="ten" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <label for="tuoi">Tuổi</label>
  <input id="tuoi" name="tuoi" type="number" min="6" max="100">

  <label for="lop">Lớp</label>
  <select id="lop" name="lop">
    <option>K65</option><option>K66</option>
  </select>

  <label for="gt">Ghi chú</label>
  <textarea id="gt" name="gt" rows="3"></textarea>

  <label><input type="checkbox" name="dongy" required> Tôi đồng ý điều khoản</label>
  <button type="submit">Đăng ký</button>
</form>

Các kiểu input hay dùng

Kiểm tra dữ liệu

<input type="text" name="ma" pattern="[A-Z]{2}[0-9]{4}"
       title="2 chữ hoa và 4 số, ví dụ SV2026" required>
<input type="password" minlength="8" required>

Dùng CSS input:invalid và input:valid để đổi màu viền khi sai/đúng.