Giới thiệu về biểu mẫu và các thẻ cơ bản
Biểu mẫu (Forms) trong HTML là một thành phần quan trọng giúp thu thập dữ liệu từ người dùng. Chúng được sử dụng trong nhiều ứng dụng web như đăng ký, đăng nhập, tìm kiếm, đặt hàng và nhiều tình huống khác.
Trong bài này, chúng ta sẽ tìm hiểu về cách tạo một biểu mẫu đơn giản với các thẻ cơ bản như <form>, <input>, <label>, và <button>.
1. Giới thiệu về biểu mẫu và các thẻ cơ bản
Thẻ <form> và vai trò trong HTML
Thẻ <form> được sử dụng để chứa các trường nhập liệu và nút gửi dữ liệu. Một biểu mẫu thường có hai thuộc tính quan trọng:
-
action: Xác định địa chỉ URL sẽ xử lý dữ liệu khi biểu mẫu được gửi. -
method: Xác định phương thức gửi dữ liệu (GET hoặc POST).
Ví dụ:
<form action="submit.php" method="POST">
<!-- Các trường nhập liệu sẽ được đặt ở đây -->
</form>
Thẻ <input> – Trường nhập liệu cơ bản
Thẻ <input> được dùng để tạo các ô nhập dữ liệu. Một số loại phổ biến:
-
text– Nhập văn bản -
email– Nhập email -
password– Nhập mật khẩu
Ví dụ:
<input type="text" name="username" placeholder="Nhập tên người dùng">
<input type="email" name="email" placeholder="Nhập email">
<input type="password" name="password" placeholder="Nhập mật khẩu">
Thẻ <label> – Nhãn cho trường nhập liệu
Thẻ <label> giúp người dùng hiểu được mỗi ô nhập liệu có ý nghĩa gì. Khi nhấn vào nhãn, con trỏ sẽ tự động di chuyển đến ô nhập tương ứng.
Ví dụ:
<label for="username">Tên người dùng:</label>
<input type="text" id="username" name="username">
Ở đây, thuộc tính for="username" giúp liên kết <label> với <input> có id="username".
Thẻ <button> – Nút gửi dữ liệu
Thẻ <button> hoặc <input type="submit"> được sử dụng để gửi dữ liệu của biểu mẫu.
Ví dụ:
<button type="submit">Gửi</button>
2. Thực hành: Tạo biểu mẫu cơ bản
Hãy tạo một biểu mẫu đơn giản để thu thập thông tin đăng ký từ người dùng, bao gồm:
- Họ và tên
- Mật khẩu
- Nút gửi
Mã HTML hoàn chỉnh:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biểu mẫu cơ bản</title>
</head>
<body>
<h2>Đăng ký tài khoản</h2>
<form action="submit.php" method="POST">
<label for="fullname">Họ và Tên:</label>
<input type="text" id="fullname" name="fullname" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="password">Mật khẩu:</label>
<input type="password" id="password" name="password" required>
<br><br>
<button type="submit">Đăng ký</button>
</form>
</body>
</html>
3. Kết luận
Trong bài này, chúng ta đã tìm hiểu về biểu mẫu trong HTML, cách tạo các trường nhập liệu và nút gửi dữ liệu. Biểu mẫu là một phần không thể thiếu của các trang web, giúp người dùng tương tác với hệ thống.
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com