HTML cung cấp nhiều thuộc tính để tùy chỉnh cách hoạt động của các trường nhập liệu, giúp biểu mẫu trở nên trực quan và dễ sử dụng hơn.
1. required – bắt buộc nhập
- Khi thêm thuộc tính
required, trình duyệt sẽ không cho gửi biểu mẫu nếu người dùng chưa điền vào trường đó.
<input type="text" name="hoten" required>
2. placeholder – gợi ý trong ô nhập
- Hiển thị văn bản gợi ý bên trong ô nhập, biến mất khi người dùng bắt đầu gõ.
<input type="email" placeholder="nhap@email.com">
3. value – giá trị mặc định
- Dùng để đặt sẵn giá trị trong trường nhập liệu.
<input type="text" value="Nguyễn Văn A">
- Khi gửi biểu mẫu, nếu người dùng không thay đổi thì giá trị mặc định sẽ được gửi đi.
4. checked – mặc định được chọn (radio, checkbox)
- Dùng với
radiohoặccheckboxđể chỉ định mục nào được chọn sẵn.
<input type="radio" name="gioitinh" value="nam" checked> Nam
<input type="checkbox" name="so_thich[]" value="code" checked> Lập trình
5. Thực hành
Tạo file input-thuoc-tinh.html và thử đoạn sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Thuộc tính input</title>
</head>
<body>
<h1>Đăng ký nhanh</h1>
<form action="#" method="post">
<p>
Họ tên: <br>
<input type="text" name="hoten" placeholder="Nhập họ tên" required>
</p>
<p>
Email: <br>
<input type="email" name="email" placeholder="abc@gmail.com" required>
</p>
<p>
Giới tính: <br>
<input type="radio" name="gioitinh" value="nam" checked> Nam
<input type="radio" name="gioitinh" value="nu"> Nữ
</p>
<p>
Sở thích: <br>
<input type="checkbox" name="so_thich[]" value="code" checked> Lập trình
<input type="checkbox" name="so_thich[]" value="docsach"> Đọc sách
</p>
<p>
<input type="submit" value="Gửi đi">
</p>
</form>
</body>
</html>
6. Ghi nhớ
| Thuộc tính | Tác dụng |
|---|---|
required | Bắt buộc phải nhập |
placeholder | Gợi ý nội dung cần nhập |
value | Giá trị mặc định |
checked | Chọn sẵn radio hoặc checkbox |
Thảo luận