Bài 5: Form (Biểu mẫu) cơ bản trong HTML
🎯 Mục tiêu
- Hiểu form dùng để làm gì (nhập dữ liệu, gửi thông tin)
- Biết dùng các thẻ quan trọng:
form,label,input,textarea,select,button - Biết thuộc tính cơ bản:
name,type,placeholder,required - Biết kiểm tra dữ liệu đơn giản bằng JavaScript (không cần server)
📘 Lý thuyết ngắn
1) Form là gì? Form là khu vực để người dùng nhập thông tin (tên, email, phản hồi…).
2) Cấu trúc form cơ bản
<form>
<label>Họ tên</label>
<input type="text">
<button type="submit">Gửi</button>
</form>
3) Một số loại input thường gặp
type="text": chữtype="email": email (trình duyệt kiểm tra định dạng)type="number": sốtype="password": mật khẩutype="radio",checkbox: chọn 1 / chọn nhiều
Lưu ý: Thuộc tính required bắt buộc người dùng nhập trước khi gửi.
💻 Code mẫu (Form đăng ký + kiểm tra bằng JavaScript)
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Bài 5 - Form cơ bản</title>
<style>
body {
font-family: Arial;
padding: 24px;
background: #f7f8fa;
line-height: 1.7;
}
.card {
max-width: 720px;
margin: 0 auto;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 18px;
}
h1 { margin-top: 0; text-align: center; }
label { display:block; margin: 12px 0 6px; font-weight: 600; }
input, textarea, select {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 10px;
outline: none;
font-size: 14px;
background: #fff;
box-sizing: border-box;
}
input:focus, textarea:focus, select:focus {
border-color: #999;
}
.row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 700px){
.row{ grid-template-columns: 1fr; }
}
button {
margin-top: 14px;
padding: 10px 14px;
border: 0;
border-radius: 10px;
cursor: pointer;
background: #111;
color: #fff;
font-size: 14px;
}
.msg {
margin-top: 12px;
padding: 10px 12px;
border-radius: 10px;
background: #f3f4f6;
border: 1px solid #e5e7eb;
}
.ok { background: #ecfdf5; border-color: #bbf7d0; }
.err { background: #fff1f2; border-color: #fecdd3; }
small { color:#555; }
</style>
</head>
<body>
<div class="card">
<h1>Form đăng ký học</h1>
<form id="regForm">
<label for="name">Họ và tên</label>
<input id="name" name="name" type="text" placeholder="Nhập họ tên..." required>
<div class="row">
<div>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="vd: abc@gmail.com" required>
</div>
<div>
<label for="age">Tuổi</label>
<input id="age" name="age" type="number" min="1" max="120" placeholder="vd: 16" required>
</div>
</div>
<label for="level">Trình độ</label>
<select id="level" name="level">
<option value="moi">Mới bắt đầu</option>
<option value="co-ban">Đã biết cơ bản</option>
<option value="nang-cao">Muốn nâng cao</option>
</select>
<label>Bạn muốn học phần nào?</label>
<div>
<label><input type="checkbox" name="topic" value="HTML"> HTML</label>
<label><input type="checkbox" name="topic" value="CSS"> CSS</label>
<label><input type="checkbox" name="topic" value="JavaScript"> JavaScript</label>
</div>
<label for="note">Ghi chú</label>
<textarea id="note" name="note" rows="4" placeholder="Bạn muốn học để làm gì?"></textarea>
<button type="submit">Gửi đăng ký</button>
<div id="msg" class="msg">
<small>Kết quả sẽ hiển thị ở đây sau khi bấm “Gửi đăng ký”.</small>
</div>
</form>
</div>
<script>
const form = document.getElementById("regForm");
const msg = document.getElementById("msg");
form.addEventListener("submit", function(e){
e.preventDefault(); // chặn reload trang
const name = document.getElementById("name").value.trim();
const email = document.getElementById("email").value.trim();
const age = Number(document.getElementById("age").value);
// lấy checkbox đã chọn
const topics = Array.from(document.querySelectorAll('input[name="topic"]:checked'))
.map(x => x.value);
// kiểm tra đơn giản
if(name.length < 2){
msg.className = "msg err";
msg.innerHTML = "❌ Tên quá ngắn. Vui lòng nhập lại!";
return;
}
if(age < 6 || age > 80){
msg.className = "msg err";
msg.innerHTML = "❌ Tuổi không hợp lệ (6–80).";
return;
}
msg.className = "msg ok";
msg.innerHTML =
"✅ Đăng ký thành công!<br>" +
"Họ tên: <b>" + name + "</b><br>" +
"Email: <b>" + email + "</b><br>" +
"Tuổi: <b>" + age + "</b><br>" +
"Chủ đề: <b>" + (topics.length ? topics.join(", ") : "Chưa chọn") + "</b>";
});
</script>
</body>
</html>
👉 Copy code → lưu thành bai5.html → mở bằng Chrome.
Form này chạy hoàn toàn offline, JS chỉ hiển thị kết quả (chưa gửi dữ liệu lên server).
✍️ Bài tập
- Thêm trường Số điện thoại (type="tel").
- Thêm lựa chọn giới tính bằng
radio(Nam/Nữ/Khác). - Nếu người học không chọn chủ đề nào thì báo lỗi.
- (Nâng cao) Khi đăng ký thành công, tự động xóa nội dung form.
✅ Đáp án gợi ý
1) Input số điện thoại
<label for="phone">Số điện thoại</label>
<input id="phone" name="phone" type="tel" placeholder="vd: 09xx..." required>
2) Radio giới tính
<label>Giới tính</label>
<label><input type="radio" name="gender" value="Nam" required> Nam</label>
<label><input type="radio" name="gender" value="Nữ"> Nữ</label>
<label><input type="radio" name="gender" value="Khác"> Khác</label>
3) Kiểm tra nếu chưa chọn chủ đề
// sau khi lấy topics
if(topics.length === 0){
msg.className = "msg err";
msg.innerHTML = "❌ Bạn cần chọn ít nhất 1 chủ đề!";
return;
}
4) Xóa form khi thành công
form.reset();
📌 Danh sách bình luận