Các kiểu input trong form

Khái niệm và lý thuyết

Không có type, input mặc định là text. Trình duyệt không hỗ trợ một type nào đó cũng tự lùi về text, nên dùng type mới luôn an toàn. Trên điện thoại, type="email" hiện bàn phím có @, type="tel" hiện bàn phím số, type="url" có phím “.com”.

Nhập văn bản

<p><label>text: <input type="text" name="ho_ten"></label></p>
<p><label>password: <input type="password" name="mk" value="matkhau123"></label></p>
<p><label>email: <input type="email" name="email" placeholder="Địa chỉ email này đang được bảo vệ từ spam bots, bạn cần kích hoạt Javascript để xem nó. Bạn cần kích hoạt Javascript để xem nó."></label></p>
<p><label>tel: <input type="tel" name="sdt" placeholder="0912 345 678"></label></p>
<p><label>url: <input type="url" name="web" placeholder="https://"></label></p>
<p><label>search: <input type="search" name="tu_khoa" placeholder="Tìm kiếm..."></label></p>

Số và thanh trượt

<p><label>number: <input type="number" name="so_luong" min="1" max="10" step="1" value="1"></label></p>
<p><label>range: <input type="range" name="am_luong" min="0" max="100" value="60"
  oninput="this.nextElementSibling.value = this.value"> <output>60</output></label></p>

Ngày và giờ

<p><label>date: <input type="date" name="ngay"></label></p>
<p><label>time: <input type="time" name="gio"></label></p>
<p><label>datetime-local: <input type="datetime-local" name="lich_hen"></label></p>
<p><label>month: <input type="month" name="thang"></label></p>
<p><label>week: <input type="week" name="tuan"></label></p>

Giá trị gửi đi luôn theo chuẩn ISO (ví dụ 2026-11-10), dù trình duyệt hiển thị theo định dạng ngày Việt Nam.

Lựa chọn: checkbox và radio

<p>Sở thích (chọn nhiều):
  <label><input type="checkbox" name="so_thich" value="doc-sach" checked> Đọc sách</label>
  <label><input type="checkbox" name="so_thich" value="the-thao"> Thể thao</label>
  <label><input type="checkbox" name="so_thich" value="am-nhac"> Âm nhạc</label></p>
<p>Hệ đào tạo (chọn một):
  <label><input type="radio" name="he" value="chinh-quy" checked> Chính quy</label>
  <label><input type="radio" name="he" value="vlvh"> Vừa làm vừa học</label></p>

Các radio cùng nhóm phải có cùng name; mỗi ô cần value riêng, nếu không máy chủ chỉ nhận chữ “on”.

Tệp, màu, ẩn

<p><label>file: <input type="file" name="anh" accept="image/*" multiple></label></p>
<p><label>color: <input type="color" name="mau" value="#2e7d32"></label></p>
<input type="hidden" name="ma_lop" value="K66-TIN">
<p><small>Có một input hidden gửi kèm mã lớp mà người dùng không thấy.</small></p>

accept lọc loại tệp (image/*, .pdf); trên điện thoại, accept="image/*" capture mở thẳng máy ảnh.

Các loại nút

<form onsubmit="alert('Đã gửi'); return false;">
  <input type="text" name="x" value="abc">
  <input type="submit" value="Gửi">
  <input type="reset" value="Nhập lại">
  <input type="button" value="Nút thường" onclick="alert('Không gửi form')">
</form>

type="image" dùng ảnh làm nút gửi. Hiện nay nên dùng phần tử <button> vì chứa được cả biểu tượng và chữ.

Bảng tổng hợp