Các loại input trong HTML
Trong HTML, thẻ <input> là một trong những thành phần quan trọng nhất để thu thập dữ liệu từ người dùng. Có nhiều loại <input> khác nhau, mỗi loại phục vụ một mục đích cụ thể.
Trong bài này, chúng ta sẽ tìm hiểu về các loại <input> quan trọng như text, password, email, number, tel, cũng như cách sử dụng checkbox, radio button và file upload. Cuối cùng, chúng ta sẽ thực hành tạo một biểu mẫu đăng ký tài khoản.
1. Các loại input trong HTML
Các loại <input> quan trọng
Dưới đây là một số loại <input> phổ biến và cách sử dụng chúng:
-
text– Nhập văn bản thông thường -
password– Nhập mật khẩu (ẩn ký tự) -
email– Nhập địa chỉ email (có kiểm tra định dạng) -
number– Nhập số -
tel– Nhập số điện thoại
Ví dụ:
<input type="text" name="fullname" placeholder="Họ và Tên">
<input type="password" name="password" placeholder="Nhập mật khẩu">
<input type="email" name="email" placeholder="Nhập email">
<input type="number" name="age" placeholder="Nhập tuổi">
<input type="tel" name="phone" placeholder="Nhập số điện thoại">
Checkbox và Radio Button
Checkbox (<input type="checkbox">)
Checkbox cho phép người dùng chọn nhiều tùy chọn cùng một lúc.
Ví dụ:
<label><input type="checkbox" name="hobby" value="reading"> Đọc sách</label>
<label><input type="checkbox" name="hobby" value="sports"> Thể thao</label>
<label><input type="checkbox" name="hobby" value="music"> Nghe nhạc</label>
Radio Button (<input type="radio">)
Radio button chỉ cho phép chọn một tùy chọn trong một nhóm.
Ví dụ:
<label><input type="radio" name="gender" value="male"> Nam</label>
<label><input type="radio" name="gender" value="female"> Nữ</label>
<label><input type="radio" name="gender" value="other"> Khác</label>
Lưu ý: Các radio button cùng một nhóm phải có cùng name để đảm bảo chỉ chọn được một giá trị.
Input cho file upload (<input type="file">)
Thẻ <input type="file"> cho phép người dùng tải lên tệp tin như hình ảnh, tài liệu.
Ví dụ:
<label for="avatar">Chọn ảnh đại diện:</label>
<input type="file" id="avatar" name="avatar">
2. Thực hành: Tạo biểu mẫu đăng ký tài khoản
Chúng ta sẽ tạo một biểu mẫu đăng ký tài khoản bao gồm:
- Nhập họ và tên
- Nhập email, mật khẩu
- Chọn giới tính
- Chọn sở thích bằng checkbox
- Upload ảnh đại diện
- Nút đăng ký
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 đăng ký</title>
</head>
<body>
<h2>Đăng ký tài khoản</h2>
<form action="register.php" method="POST" enctype="multipart/form-data">
<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>
<label>Giới tính:</label>
<input type="radio" name="gender" value="male"> Nam
<input type="radio" name="gender" value="female"> Nữ
<input type="radio" name="gender" value="other"> Khác
<br><br>
<label>Sở thích:</label>
<input type="checkbox" name="hobby" value="reading"> Đọc sách
<input type="checkbox" name="hobby" value="sports"> Thể thao
<input type="checkbox" name="hobby" value="music"> Nghe nhạc
<br><br>
<label for="avatar">Chọn ảnh đại diện:</label>
<input type="file" id="avatar" name="avatar">
<br><br>
<button type="submit">Đăng ký</button>
</form>
</body>
</html>
3. Kết luận
Trong bài học này, chúng ta đã tìm hiểu về các loại <input> quan trọng trong HTML, từ text, email, password đến checkbox, radio button và file upload. Đây là những thành phần quan trọng giúp thu thập dữ liệu từ người dù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