HTML cơ bản – Bài 12: Kiểm tra form, name/value và GET/POST
Bạn sẽ hiểu dữ liệu form được gửi theo những khóa nào, cách kiểm tra cơ bản trong trình duyệt và vai trò bắt buộc của phía máy chủ. Ví dụ chỉ dùng dữ liệu giả để quan sát luồng hoạt động.
Lộ trình này học qua website “Góc học web”: trang chủ, trang bài viết và trang liên hệ. Mỗi bài giải quyết một việc cụ thể. Các bài về từng thẻ là tài liệu tra cứu, không phải danh sách bắt buộc học thuộc.
Mục lục
Một form tạo ra dữ liệu như thế nào?
Những điều khiển đủ điều kiện tham gia gửi được thu thập theo name và giá trị của chúng. Trường bị disabled, checkbox chưa chọn hoặc điều khiển không có name có thể không xuất hiện trong dữ liệu gửi. Tên khóa là giao ước với phía máy chủ, không phải chữ trang trí bên ngoài form.
action xác định URL tiếp nhận; method xác định phương thức gửi. Khi action trỏ đến result.html trong ví dụ GET, ta chỉ đang điều hướng tới một tệp tĩnh với query string. Không có đoạn mã máy chủ đọc, kiểm tra hay lưu những giá trị đó.
GET và POST khác nhau ở đâu?
| Cách gửi | Dữ liệu thường xuất hiện | Tình huống phổ biến |
|---|---|---|
| GET | Trong query string của URL. | Tìm kiếm hoặc lọc có thể chia sẻ đường dẫn. |
| POST | Trong phần body của yêu cầu. | Tạo hoặc thay đổi dữ liệu theo thiết kế backend. |
POST không tự mã hóa dữ liệu; website cần HTTPS để bảo vệ dữ liệu trên đường truyền. Không gửi mật khẩu bằng form GET. URL có thể nằm trong lịch sử và nhiều hệ thống log. Ngay cả POST vẫn cần xử lý và bảo vệ đúng ở phía máy chủ.
Một tệp .html tĩnh không tự trở thành backend khi đổi method thành post. Thử POST vào hosting không hỗ trợ có thể nhận lỗi phương thức. Vì vậy ví dụ tương tác trong bài cố ý dùng GET và chỉ cho dữ liệu giả.
Kiểm tra sẵn có của trình duyệt
required yêu cầu có giá trị; type=”email” kiểm tra định dạng cơ bản; minlength và maxlength áp dụng theo điều khiển hỗ trợ; min, max, step giới hạn một số kiểu số hoặc ngày. pattern khớp mẫu trên những kiểu input có hỗ trợ, không phải mọi trường.
Ví dụ HVC[0-9]{3} yêu cầu chữ HVC rồi ba chữ số. Nếu trường không required, giá trị rỗng có thể không bị loại chỉ bởi pattern. Đừng viết một biểu thức chính quy quá phức tạp cho tên người hoặc địa chỉ thật khi chưa hiểu các trường hợp hợp lệ.
Vì sao vẫn phải kiểm tra ở backend?
Người gửi có thể thay đổi mã trang hoặc tạo yêu cầu không đi qua giao diện của bạn. Kiểm tra phía trình duyệt chủ yếu hỗ trợ trải nghiệm; máy chủ phải tự kiểm tra dữ liệu, quyền, giới hạn và các quy tắc nghiệp vụ. Một form vượt qua thông báo required không có nghĩa dữ liệu đáng tin cậy.
Ứng dụng thật còn cần xử lý lỗi rõ ràng, hạn chế lạm dụng và bảo vệ các thao tác có trạng thái theo thiết kế, chẳng hạn chống CSRF khi phù hợp. HTML cung cấp cấu trúc điều khiển, không hoàn thành toàn bộ nhiệm vụ bảo mật đó.
Đọc thông báo và giữ hướng dẫn rõ ràng
Hướng dẫn về mã học viên trong ví dụ được hiển thị trước khi gửi và nối bằng aria-describedby. Thông báo mặc định của trình duyệt có thể khác ngôn ngữ và cách thể hiện. Khi ứng dụng có lỗi từ máy chủ, cần nối lỗi với đúng trường và giúp người dùng sửa mà không mất mọi dữ liệu đang nhập.
Hãy thử để trống, nhập email sai định dạng, ghi chú ngắn và mã HVC123. Chỉ dùng dữ liệu giả. Khi đã hợp lệ, bạn tới trang minh họa; đừng diễn giải dòng đó là xác nhận một liên hệ thật đã được gửi thành công.
Ví dụ để tự chạy
Tạo một tệp HTML để thử đoạn mã sau. Nếu đây là đoạn trích trong body, hãy đặt nó vào bộ khung tài liệu đã học ở bài 3. Bộ mã tải về có sẵn ví dụ đầy đủ của bài này.
<form action="result.html" method="get">
<p>Chỉ nhập dữ liệu giả để quan sát GET; form không lưu dữ liệu.</p>
<label for="ma">Mã học viên giả (HVC và 3 chữ số)</label>
<input id="ma" name="ma" pattern="HVC[0-9]{3}" required aria-describedby="goi-y-ma">
<p id="goi-y-ma">Ví dụ HVC123. Không dùng mã cá nhân thật.</p>
<label for="email-thu">Email giả</label>
<input id="email-thu" type="email" name="email" required>
<label for="ghi-chu">Ghi chú (10–200 ký tự)</label>
<textarea id="ghi-chu" name="ghi_chu" minlength="10" maxlength="200" required></textarea>
<p><button type="submit">Kiểm tra và chuyển trang</button></p>
</form>Kết quả hiển thị
Trình duyệt chặn một số đầu vào thiếu hoặc sai định dạng. Khi các điều kiện đạt, nó chuyển tới trang kết quả tĩnh. Đây là ví dụ của kiểm tra giao diện, không thay thế xác thực backend.
Mở ví dụ bài 12 trong tab riêng · Tải bộ ví dụ 16 bài và website hoàn chỉnh
Lỗi thường gặp và cách sửa
- Nghĩ POST tự bảo mật: cần HTTPS và xử lý máy chủ phù hợp.
- Quên required rồi mong pattern cấm bỏ trống: khai báo đúng nhu cầu.
- Dùng dữ liệu cá nhân thật để thử GET: chỉ dùng mẫu giả.
Tự kiểm tra
- Chỉ ra dữ liệu nào không xuất hiện nếu bạn bỏ name khỏi input.
- Giải thích vì sao việc sửa required trong DevTools không được phép vượt qua kiểm tra của ứng dụng thật.
Tra cứu khi cần
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
