Thẻ <input> trong HTML có thể biểu diễn nhiều kiểu trường nhập khác nhau chỉ bằng cách thay đổi giá trị của thuộc tính type.
1. Trường nhập văn bản (type="text")
Dùng để nhập chuỗi ký tự ngắn, như tên người dùng, địa chỉ,…
<input type="text" name="hoten" placeholder="Nhập họ tên">
2. Trường nhập email (type="email")
- Dùng để nhập địa chỉ email.
- Trình duyệt sẽ kiểm tra định dạng email trước khi gửi biểu mẫu.
<input type="email" name="email" placeholder="abc@example.com">
3. Trường nhập mật khẩu (type="password")
- Ký tự nhập vào sẽ được ẩn bằng dấu chấm hoặc sao.
- Dùng cho trường mật khẩu, mã bảo mật,…
<input type="password" name="matkhau">
4. Nút chọn đơn (type="radio")
- Cho phép người dùng chọn một trong nhiều tùy chọn.
- Các nút cùng tên
namesẽ liên kết với nhau.
<p>Chọn giới tính:</p>
<input type="radio" name="gioitinh" value="nam"> Nam
<input type="radio" name="gioitinh" value="nu"> Nữ
5. Hộp kiểm nhiều lựa chọn (type="checkbox")
- Cho phép người dùng chọn nhiều hơn một lựa chọn.
<p>Sở thích:</p>
<input type="checkbox" name="so_thich[]" value="bongda"> Bóng đá
<input type="checkbox" name="so_thich[]" value="docsach"> Đọc sách
<input type="checkbox" name="so_thich[]" value="nghenhac"> Nghe nhạc
6. Thực hành
Tạo file input-nhap-lieu.html với nội dung:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form với nhiều loại input</title>
</head>
<body>
<h1>Đăng ký tài khoản</h1>
<form action="#" method="post">
<p>
Họ tên:<br>
<input type="text" name="hoten" placeholder="Họ và tên">
</p>
<p>
Email:<br>
<input type="email" name="email" placeholder="email@example.com">
</p>
<p>
Mật khẩu:<br>
<input type="password" name="matkhau">
</p>
<p>
Giới tính:<br>
<input type="radio" name="gioitinh" value="nam"> Nam
<input type="radio" name="gioitinh" value="nu"> Nữ
</p>
<p>
Sở thích:<br>
<input type="checkbox" name="so_thich[]" value="code"> Lập trình
<input type="checkbox" name="so_thich[]" value="music"> Âm nhạc
<input type="checkbox" name="so_thich[]" value="game"> Game
</p>
<p>
<button type="submit">Đăng ký</button>
</p>
</form>
</body>
</html>
7. Ghi nhớ
| Kiểu input | Dùng để |
|---|---|
text | Nhập văn bản |
email | Nhập email (có kiểm tra định dạng) |
password | Nhập mật khẩu (ẩn ký tự) |
radio | Chọn một trong nhiều |
checkbox | Chọn nhiều tùy chọn |
Thảo luận