Biểu mẫu HTML (<form>) là yếu tố thiết yếu khi bạn cần thu thập dữ liệu từ người truy cập trang web. Ví dụ: đăng ký tài khoản (họ tên, email, mật khẩu), đặt hàng, liên hệ, tìm kiếm, v.v.
Dữ liệu từ biểu mẫu sẽ được gửi đến ứng dụng phía máy chủ (backend) như PHP, Node.js, Python, Java, C#... để xử lý theo logic nghiệp vụ.
Cấu trúc cơ bản
<form action="URL_xử_lý" method="GET|POST"> các phần tử form: input, textarea, select, button... </form>
action: URL nhận dữ liệu (endpoint backend)method:GET(dữ liệu trên URL) hoặcPOST(dữ liệu trong body request, an toàn hơn)
Các loại <input> phổ biến (HTML4)
| STT | Loại & Mô tả |
|---|---|
| 1 | text: Ô nhập văn bản một dòng |
| 2 | password: Ô nhập mật khẩu (ký tự bị che) |
| 3 | checkbox: Hộp kiểm (chọn nhiều giá trị) |
| 4 | radio: Nút tròn (chọn một trong nhiều) |
| 5 | submit: Nút gửi biểu mẫu |
| 6 | file: Tải lên tệp |
| 7 | image: Nút gửi dạng hình ảnh |
| 8 | hidden: Trường ẩn (không hiển thị) |
| 9 | select: Danh sách thả xuống (dùng cặp <select> + <option>) |
| 10 | textarea: Ô nhập văn bản nhiều dòng |
| 11 | button: Nút bấm tùy chỉnh (dùng <button>) |
Các loại <input> mới trong HTML5
| STT | Loại & Mô tả |
|---|---|
| 1 | datetime: Ngày giờ có múi giờ (UTC) - đã bị loại bỏ, dùng datetime-local |
| 2 | datetime-local: Ngày giờ cục bộ (không múi giờ) |
| 3 | date: Chỉ ngày (yyyy-mm-dd) |
| 4 | month: Tháng/năm (yyyy-mm) |
| 5 | week: Tuần/năm (yyyy-Www) |
| 6 | time: Giờ (hh:mm:ss) |
| 7 | number: Chỉ nhập số (có thuộc tính step, min, max) |
| 8 | range: Thanh trượt chọn số trong khoảng |
| 9 | email: Kiểm tra định dạng email tự động |
| 10 | url: Kiểm tra định dạng URL tự động |
| 11 | tel: Số điện thoại (không validate tự động, dùng pattern) |
| 12 | search: Ô tìm kiếm (có nút xóa trên một số trình duyệt) |
| 13 | color: Bộ chọn màu |
Ví dụ 1: Form đăng ký cơ bản
<!DOCTYPE html>
<html>
<body>
<h2>Đăng ký tài khoản</h2>
<form action="/dang-ky" method="post">
<label>Tên đăng nhập: <input type="text" name="username" placeholder="Nhập tên..." required></label><br>
<label>Mật khẩu: <input type="password" name="password" placeholder="Nhập mật khẩu..." required></label><br>
<label>Ngày sinh: <input type="date" name="dob"></label><br>
<label>Điện thoại: <input type="tel" name="phone" placeholder="09xxxxxxxx"></label><br>
<label>Email: <input type="email" name="email" placeholder="email@domain.com" required></label><br><br>
<button type="submit">Đăng ký</button>
</form>
</body>
</html>
Ví dụ 2: Form có checkbox đồng ý nhận tin
<!DOCTYPE html>
<html>
<body>
<h2>Đăng ký nhận bản tin</h2>
<form action="/newsletter" method="post">
<label>Email: <input type="email" name="email" required></label><br>
<label>
<input type="checkbox" name="subscribe" value="yes" checked>
Tôi đồng ý nhận bản tin qua email
</label><br><br>
<button type="submit">Gửi</button>
</form>
</body>
</html>
Lưu ý tốt: Luôn sử dụng thẻ <label> gắn với input qua thuộc tính for/id hoặc bao bọc input để tăng khả năng truy cập (accessibility) và trải nghiệm người dùng.