HTML cơ bản – Bài 10: Tạo biểu mẫu liên hệ đầu tiên
Bạn sẽ tạo trang liên hệ có họ tên, email, nội dung và nút gửi. Bài học phân biệt phần giao diện HTML với phần xử lý backend để tránh hiểu rằng chỉ tạo form là website đã nhận được tin nhắn.
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
Form làm được gì và chưa làm được gì?
HTML tổ chức các điều khiển và mô tả nơi, cách gửi dữ liệu. Nó không tự tạo một hộp thư, cơ sở dữ liệu hay chức năng chống spam. Ứng dụng thật cần phía máy chủ hoặc dịch vụ tiếp nhận cùng các bước kiểm tra dữ liệu phù hợp.
Ví dụ học tập dùng GET và result.html để quan sát việc chuyển trang, chỉ nhập dữ liệu giả. Trang kết quả là một tệp tĩnh, không lưu, không gửi email và không xác nhận đã nhận một liên hệ thật. Không dùng ví dụ này để thu thập thông tin người dùng trên website của bạn.
Nhãn nhìn thấy được là phần thiết yếu
label for=”email” trỏ đến điều khiển có id=”email”. Khi bấm nhãn, trình duyệt thường đưa focus vào điều khiển; công cụ hỗ trợ cũng có thể dùng liên kết đó để xác định tên trường. ID phải duy nhất trong tài liệu.
Placeholder chỉ là gợi ý ngắn có thể biến mất khi nhập, không thay thế một nhãn rõ ràng. Nếu cần hướng dẫn dài, thêm văn bản bên cạnh và liên kết bằng aria-describedby khi thích hợp. Đừng buộc người dùng nhớ nội dung placeholder sau khi bắt đầu nhập.
id và name có vai trò khác nhau
id giúp nhận diện phần tử trong tài liệu, nối nhãn hoặc fragment. name là khóa của điều khiển trong dữ liệu gửi, như [email protected]. Một trường có ID nhưng không có name có thể hiển thị và nhận nhập bình thường nhưng không được đưa vào dữ liệu gửi theo cách bạn mong muốn.
type=”email” cung cấp ngữ nghĩa và kiểm tra định dạng cơ bản. Nó không chứng minh địa chỉ email tồn tại hay thuộc về người đang nhập. Để mặc định input không ghi type trong ví dụ họ tên, nó có kiểu text.
textarea và button
textarea phù hợp nội dung nhiều dòng; rows gợi ý số dòng hiển thị chứ không giới hạn số dòng người dùng có thể nhập. Giá trị ban đầu của textarea nằm giữa thẻ mở và thẻ đóng, khác với thuộc tính value của input.
Trong form, ghi rõ type=”submit” cho nút gửi và type=”button” cho nút hành động không gửi. Không dùng một liên kết href=”#” làm nút gửi rồi chờ nó tự biết phải gửi biểu mẫu. Nút reset có thể khiến người dùng mất nội dung đang nhập nên không cần thêm theo thói quen.
Hoàn thiện trang liên hệ
Đặt form trong main của lien-he.html, thêm h1 Liên hệ và đoạn mô tả mục đích. Giữ menu để quay lại trang chủ. Thử đi qua từng điều khiển bằng Tab, nhập dữ liệu giả và nhấn nút. required yêu cầu có dữ liệu; phần kiểm tra đầy đủ được học ở bài 12.
Bản nhúng trong bài có sandbox để giới hạn quyền của ví dụ. Nếu trình duyệt của bạn hạn chế một thao tác, mở ví dụ trong tab riêng hoặc chạy bản tải về, không tắt bảo vệ của trình duyệt để làm theo bài học.
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>Ví dụ học tập: chỉ nhập dữ liệu giả, không có hệ thống nhận liên hệ.</p>
<label for="ho-ten">Họ tên</label>
<input id="ho-ten" name="ho_ten" autocomplete="name" required>
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required>
<label for="noi-dung">Nội dung</label>
<textarea id="noi-dung" name="noi_dung" rows="5" required></textarea>
<p><button type="submit">Xem luồng gửi thử</button></p>
</form>Kết quả hiển thị
Bạn thấy ba trường có nhãn và một nút gửi thử. Khi dùng dữ liệu giả hợp lệ, trình duyệt chuyển sang tệp kết quả minh họa; đó không phải bằng chứng có backend lưu liên hệ.
Mở ví dụ bài 10 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
- Dùng placeholder làm nhãn duy nhất: thêm label nhìn thấy được.
- Quên name: dữ liệu gửi thiếu khóa tương ứng.
- Cho rằng email hợp định dạng là email thật: cần xác minh riêng trong ứng dụng thật.
Tự kiểm tra
- Bấm nhãn Email và quan sát focus.
- So sánh tên xuất hiện trong URL GET với name của từng điều khiển, chỉ dùng dữ liệu giả.
Tra cứu khi cần
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
