Thuộc tính của input điều khiển giá trị mặc định, giới hạn nhập, gợi ý, trạng thái khóa và các ràng buộc dữ liệu. Nắm vững chúng giúp form chặt chẽ mà không cần viết JavaScript.
Bạn sẽ học được
- Dùng value, placeholder, readonly, disabled
- Giới hạn dữ liệu: maxlength, minlength, min, max, step, pattern
- Dùng required, multiple, autofocus, autocomplete, list
- Dùng inputmode, size, accept
Khái niệm và lý thuyết
| Thuộc tính | Ý nghĩa | Ghi chú |
|---|---|---|
| value | Giá trị ban đầu | |
| placeholder | Chữ gợi ý mờ | Không thay label |
| readonly | Chỉ xem, không sửa | Vẫn được gửi |
| disabled | Khóa, xám màu | Không được gửi |
| required | Bắt buộc nhập | |
| maxlength / minlength | Số ký tự tối đa / tối thiểu | Chữ |
| min / max / step | Giới hạn và bước nhảy | Số, ngày |
| pattern | Biểu thức chính quy | Chữ |
| multiple | Nhiều giá trị | email, file |
| autofocus | Đặt con trỏ khi tải trang | Một trường mỗi trang |
| autocomplete | Gợi ý dữ liệu đã lưu | name, email, tel, new-password... |
| list | Gắn datalist | |
| inputmode | Loại bàn phím ảo | numeric, decimal, email... |
| size | Độ rộng tính theo ký tự | Nên dùng CSS |
readonly và disabled
<form onsubmit="alert(new URLSearchParams(new FormData(this)).toString()); return false;">
<p><label>Mã SV (readonly): <input name="ma" value="SV2026001" readonly></label></p>
<p><label>Khoa (disabled): <input name="khoa" value="KHTN&CN" disabled></label></p>
<button>Gửi thử</button>
</form>Kết quả hiển thị
Bấm Gửi thử: chỉ ma được gửi, khoa bị bỏ qua vì disabled.
Giới hạn độ dài và giá trị
<form onsubmit="alert('Hợp lệ'); return false;">
<p><label>Tên đăng nhập (4–12 ký tự): <input name="ten" minlength="4" maxlength="12" required></label></p>
<p><label>Điểm (0–10, bước 0.25): <input type="number" name="diem" min="0" max="10" step="0.25"></label></p>
<p><label>Ngày nhập học (từ 01/08/2026): <input type="date" name="ngay" min="2026-08-01"></label></p>
<button>Kiểm tra</button>
</form>Kết quả hiển thị
pattern: biểu thức chính quy
<form onsubmit="alert('Hợp lệ'); return false;">
<p><label>Số điện thoại (10 số, bắt đầu 0):
<input name="sdt" inputmode="numeric" pattern="0[0-9]{9}" title="10 chữ số, bắt đầu bằng 0" required></label></p>
<p><label>Biển số xe Sơn La (26A-123.45):
<input name="bien_so" pattern="26[A-Z]-[0-9]{3}\.[0-9]{2}" title="Ví dụ 26A-123.45"></label></p>
<button>Kiểm tra</button>
</form>Kết quả hiển thị
| Mẫu | Nghĩa |
|---|---|
| [0-9] | Một chữ số |
| {3} | Lặp đúng 3 lần |
| [A-Z] | Một chữ hoa |
| \. | Dấu chấm thật |
| + / * | Một hoặc nhiều / không hoặc nhiều |
Nội dung title được hiện trong thông báo lỗi để hướng dẫn người dùng.
multiple, autofocus, autocomplete
<p><label>Gửi cho nhiều email (cách nhau dấu phẩy):
<input type="email" name="ds_email" multiple size="40"></label></p>
<p><label>Họ tên: <input name="name" autocomplete="name"></label></p>
<p><label>Mật khẩu mới: <input type="password" name="mk_moi" autocomplete="new-password"></label></p>Kết quả hiển thị
Giá trị autocomplete chuẩn (name, email, tel, street-address, one-time-code, new-password, current-password...) giúp trình duyệt và trình quản lý mật khẩu điền đúng ô.
Mẹo hay
Thử biểu thức chính quy tại regex101.com trước khi đưa vào pattern. Pattern trong HTML tự hiểu là khớp toàn bộ chuỗi, không cần ^ và $.
Lưu ý
readonly và disabled chỉ ngăn người dùng thông thường; người biết DevTools vẫn sửa được. Máy chủ phải tự kiểm tra lại mọi giá trị.
Thực hành
- Tạo ô mã sinh viên đúng 10 chữ số bằng pattern.
- Tạo ô điểm số 0–10 bước 0.5.
- Tạo form hồ sơ có trường readonly hiển thị mã hồ sơ.
- Thêm autocomplete chuẩn cho form đăng ký và thử tính năng tự điền của trình duyệt.
Tóm tắt bài học
- readonly vẫn gửi, disabled không gửi.
- minlength/maxlength, min/max/step, pattern giới hạn dữ liệu.
- autocomplete, inputmode cải thiện trải nghiệm nhập.
- Mọi ràng buộc phía trình duyệt cần kiểm tra lại ở máy chủ.