Biểu mẫu web: nhãn truy cập, xác thực dữ liệu và phản hồi lỗi

🧾 Form tốt là một cuộc hội thoại rõ ràng

Mỗi trường phải cho biết cần nhập gì, định dạng nào và vì sao cần dữ liệu. Placeholder chỉ là gợi ý tạm thời, không thay thế <label> vì biến mất khi nhập và có thể khó đọc.

Cấu trúc tối thiểu

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

for phải trỏ tới id; name là khóa gửi lên máy chủ. Chọn type đúng giúp bàn phím và kiểm tra cơ bản phù hợp, nhưng không chứng minh dữ liệu an toàn.

Ví dụ xử lí lỗi

Nếu email trống, đánh dấu trường bằng aria-invalid="true", liên kết mô tả lỗi qua aria-describedby, đặt thông báo cụ thể “Nhập địa chỉ email” và chuyển tiêu điểm hợp lí tới vùng lỗi. Không chỉ đổi viền thành màu đỏ.

An toàn và toàn vẹn

Máy chủ phải kiểm tra lại kiểu, độ dài, miền giá trị và quyền; mã hóa đầu ra theo ngữ cảnh; dùng CSRF protection cho thao tác thay đổi trạng thái. Xác thực không thay thế phân quyền, và lọc đầu vào không thay thế encode đầu ra.

✍️ Luyện tập

Thiết kế form đăng ký ba trường. Thử bỏ trống, nhập sai định dạng và gửi dữ liệu đã sửa HTML trên trình duyệt. Ghi lại phản hồi ở cả giao diện và máy chủ.