Biểu mẫu (form) là cách trang web thu thập thông tin từ người dùng, ví dụ như: đăng nhập, đăng ký, gửi liên hệ, tìm kiếm,…
Trong HTML, bạn tạo biểu mẫu bằng các thẻ cơ bản như: <form>, <input>, <textarea>, <button>.
1. Thẻ <form>
Là thẻ bao quanh toàn bộ nội dung của biểu mẫu.
Cú pháp cơ bản:
<form action="xu-ly.php" method="post">
<!-- Các phần tử nhập liệu -->
</form>
| Thuộc tính | Mô tả |
|---|---|
action | Đường dẫn tới tệp xử lý dữ liệu (có thể để trống khi chưa xử lý) |
method | Gửi dữ liệu bằng GET hoặc POST |
2. Thẻ <input>
Dùng để tạo các trường nhập liệu như: văn bản, mật khẩu, email, checkbox,…
Ví dụ:
<input type="text" name="ten" placeholder="Nhập tên của bạn">
<input type="email" name="email">
<input type="password" name="matkhau">
type | Ý nghĩa |
|---|---|
text | Nhập văn bản |
email | Nhập email |
password | Nhập mật khẩu |
checkbox | Hộp kiểm |
radio | Nút chọn một trong nhiều lựa chọn |
submit | Nút gửi biểu mẫu |
3. Thẻ <textarea>
Dùng để nhập nội dung nhiều dòng, ví dụ như góp ý, mô tả,…
<textarea name="noidung" rows="4" cols="40" placeholder="Nhập nội dung tại đây"></textarea>
4. Thẻ <button>
Dùng để tạo nút bấm. Có thể kết hợp với JavaScript hoặc dùng để gửi biểu mẫu.
<button type="submit">Gửi</button>
<button type="reset">Xoá</button>
5. Thực hành
Tạo file form-co-ban.html với nội dung:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Biểu mẫu cơ bản</title>
</head>
<body>
<h1>Liên hệ với chúng tôi</h1>
<form action="#" method="post">
<p>
Họ tên:<br>
<input type="text" name="hoten" placeholder="Nhập họ tên">
</p>
<p>
Email:<br>
<input type="email" name="email" placeholder="email@example.com">
</p>
<p>
Nội dung:<br>
<textarea name="noidung" rows="4" cols="40" placeholder="Nội dung bạn muốn gửi..."></textarea>
</p>
<p>
<button type="submit">Gửi</button>
<button type="reset">Xoá</button>
</p>
</form>
</body>
</html>
Mở trong trình duyệt để nhập thử thông tin.
6. Ghi nhớ
- Dùng
<form>để bao quanh toàn bộ phần nhập liệu. - Dùng
<input>,<textarea>,<button>để tạo thành phần trong biểu mẫu. - Mỗi trường nên có thuộc tính
nameđể server biết dữ liệu nào là gì.
Thảo luận
1 bình luận
Bài 13. Gửi và nhận dữ liệu qua URL (GET) và Form (POST) – Học lập trình PHP
Tháng 7 31, 2025[…] chưa quen với HTML Form, bạn nên học qua [Khóa học HTML & CSS cơ bản] hoặc [Chương 2 – HTML Form] trong môn học HTML cơ bản […]