Thẻ <input> HTML

Định nghĩa và cách sử dụng

<input> Thẻ <input> xác định trường nhập dữ liệu, người dùng có thể nhập dữ liệu vào đó.

<input> Các yếu tố là yếu tố quan trọng nhất của biểu mẫu.

<input> Các yếu tố có thể hiển thị theo nhiều cách khác nhau, tùy thuộc vào Thuộc tính type.

Dưới đây là các loại đầu vào khác nhau:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">(Giá trị mặc định)
  • <input type="time">
  • <input type="url">
  • <input type="week">

Xem thêm Thuộc tính typeĐể xem các ví dụ của mỗi loại đầu vào!

Mẫu

Biểu mẫu HTML chứa ba trường đầu vào; hai trường văn bản và một nút gửi:

<form action="/action_page.php">
  <label for="fname">Tên:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Họ:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Gửi">
</form>

Thử ngay

Lưu ý và ghi chú

Lưu ý:Luôn luôn sử dụng thẻ <label> để định nghĩa nhãn cho các phần tử sau:

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

Thuộc tính

Thuộc tính Giá trị Mô tả
accept
  • Tên mở rộng tệp
  • audio/*
  • video/*
  • image/*
  • Loại phương tiện

Định nghĩa loại tệp sẽ được gửi qua tải lên tệp.

Định nghĩa bộ lọc loại tệp mà người dùng có thể chọn từ hộp thoại chọn tệp đầu vào (chỉ áp dụng cho type="file").
alt Text Định nghĩa văn bản thay thế cho hình ảnh (chỉ áp dụng cho type="image").
autocomplete
  • on
  • off
 Định nghĩa phần tử <input> có nên启用 tự động hoàn thành hay không.
autofocus autofocus Định nghĩa phần tử <input> nên tự động nhận được sự tập trung khi trang được tải.
checked checked Định nghĩa phần tử <input> nên được chọn trước khi trang được tải (áp dụng cho type="checkbox" hoặc type="radio").
dirname inputname.dir Định nghĩa hướng văn bản sẽ được gửi.
disabled disabled Định nghĩa phần tử <input> nên bị vô hiệu hóa.
form ID biểu mẫu Định nghĩa biểu mẫu mà phần tử <input> thuộc về.
formaction URL Định nghĩa URL xử lý tệp của điều khiển đầu vào khi gửi biểu mẫu (áp dụng cho type="submit" và type="image").
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Định nghĩa cách mã hóa dữ liệu biểu mẫu khi gửi lên máy chủ (áp dụng cho type="submit" và type="image").
formmethod
  • get
  • post
 Định nghĩa phương pháp HTTP được sử dụng để gửi dữ liệu đến URL action (áp dụng cho type="submit" và type="image").
formnovalidate formnovalidate Định nghĩa rằng không nên kiểm tra biểu mẫu khi gửi biểu mẫu.
formtarget
  • _blank
  • _self
  • _parent
  • _top
Tên khung 		Định nghĩa nơi hiển thị phản hồi nhận được sau khi gửi biểu mẫu (áp dụng cho type="submit" và type="image").
height Pixel Định nghĩa chiều cao của phần tử <input> (chỉ áp dụng cho type="image").
list datalist_id Tham chiếu đến phần tử <datalist> chứa các tùy chọn trước định nghĩa của phần tử <input>.
max
  • số
  • Ngày
 Định nghĩa giá trị lớn nhất của phần tử <input>.
maxlength số Định nghĩa số ký tự tối đa được phép cho phần tử <input>.
min
  • số
  • Ngày
 Định nghĩa giá trị nhỏ nhất của phần tử <input>.
minlength số Định nghĩa số ký tự tối thiểu cần thiết trong phần tử <input>.
multiple multiple Định nghĩa rằng người dùng có thể nhập nhiều giá trị trong phần tử <input>.
name Text Định nghĩa tên của phần tử <input>.
pattern Biểu thức chính quy Định nghĩa biểu thức chính quy để kiểm tra giá trị của phần tử <input>.
placeholder Text Định nghĩa lời nhắc ngắn về giá trị mong đợi của phần tử <input>.
popovertarget ID của phần tử Định nghĩa phần tử hộp thoại cần gọi (chỉ áp dụng cho type="button").
popovertargetaction
  • hide
  • show
  • toggle
 Định nghĩa điều gì sẽ xảy ra với phần tử hộp thoại khi bạn nhấp vào nút (chỉ áp dụng cho type="button").
readonly readonly Định nghĩa rằng trường nhập là chỉ đọc.
required required Định nghĩa rằng các trường nhập phải được điền đầy đủ trước khi gửi biểu mẫu.
size số Định nghĩa chiều rộng của phần tử <input> (bằng số ký tự).
src URL Định nghĩa URL của hình ảnh được sử dụng làm nút gửi (chỉ áp dụng cho type="image").
step
  • số
  • any
 Định nghĩa khoảng cách hợp lệ giữa các số trong trường nhập.
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 Định nghĩa loại của phần tử <input> cần hiển thị.
value Text Định nghĩa giá trị của phần tử <input>.
width Pixel Định nghĩa chiều rộng của phần tử <input> (chỉ áp dụng cho type="image").

Thuộc tính toàn cục

<input> Thẻ còn hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<input> Thẻ còn hỗ trợ Thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Không có.

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Trang liên quan

Hướng dẫn HTML:

Tài liệu tham khảo HTML DOM: