Sau khi đã học các thẻ cơ bản để tạo biểu mẫu, giờ là lúc bạn kết hợp toàn bộ để xây dựng một form đăng ký đầy đủ, có cấu trúc rõ ràng, dễ sử dụng và đúng chuẩn.
1. Mục tiêu của biểu mẫu
- Thu thập các thông tin: Họ tên, Email, Mật khẩu, Giới tính, Sở thích, Quốc gia, Ghi chú.
- Có các thuộc tính như
required,placeholder,label,selected,checked… - Gửi bằng nút
submit, reset bằng nútreset.
2. Mẫu form hoàn chỉnh
Tạo file form-dang-ky-day-du.html với nội dung sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form đăng ký thành viên</title>
</head>
<body>
<h1>Đăng ký thành viên</h1>
<form action="#" method="post">
<!-- Họ tên -->
<p>
<label for="hoten">Họ và tên:</label><br>
<input type="text" id="hoten" name="hoten" placeholder="Nguyễn Văn A" required>
</p>
<!-- Email -->
<p>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="abc@example.com" required>
</p>
<!-- Mật khẩu -->
<p>
<label for="matkhau">Mật khẩu:</label><br>
<input type="password" id="matkhau" name="matkhau" required>
</p>
<!-- Giới tính -->
<p>
Giới tính:<br>
<input type="radio" id="nam" name="gioitinh" value="nam" checked>
<label for="nam">Nam</label>
<input type="radio" id="nu" name="gioitinh" value="nu">
<label for="nu">Nữ</label>
</p>
<!-- Sở thích -->
<p>
Sở thích:<br>
<input type="checkbox" id="code" name="sothich[]" value="code" checked>
<label for="code">Lập trình</label>
<input type="checkbox" id="game" name="sothich[]" value="game">
<label for="game">Game</label>
<input type="checkbox" id="docsach" name="sothich[]" value="docsach">
<label for="docsach">Đọc sách</label>
</p>
<!-- Quốc gia -->
<p>
<label for="quocgia">Quốc gia:</label><br>
<select id="quocgia" name="quocgia">
<option value="vn" selected>Việt Nam</option>
<option value="us">Hoa Kỳ</option>
<option value="kr">Hàn Quốc</option>
<option value="jp">Nhật Bản</option>
</select>
</p>
<!-- Ghi chú -->
<p>
<label for="ghichu">Ghi chú thêm:</label><br>
<textarea id="ghichu" name="ghichu" rows="4" cols="40" placeholder="Nội dung bạn muốn gửi thêm..."></textarea>
</p>
<!-- Nút Gửi và Xoá -->
<p>
<button type="submit">Đăng ký</button>
<button type="reset">Xoá form</button>
</p>
</form>
</body>
</html>
3. Ghi nhớ
- Bạn nên gắn nhãn (label) cho tất cả các trường nhập để tăng trải nghiệm người dùng.
- Sử dụng đúng loại input:
emailcho email,passwordcho mật khẩu,… - Kết hợp thêm
required,placeholder,checked,selectedđể làm form rõ ràng hơn.
4. Ứng dụng
Bạn có thể dùng mẫu form này cho:
- Đăng ký thành viên
- Gửi yêu cầu liên hệ
- Thu thập khảo sát
Thảo luận