<input>

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

  • Tag <input /> được sử dụng cho người dùng nhập hay chọn thông tin.
  • Dạng của <input /> có thể có nhiều dạng khác nhau, tùy thuộc vào thuộc tính tùy trọn type, có thể là text, một checkbox, một trường password, một button radio, một button, ...
  • Khuyên: sử dụng tag <label> để tạo nhãn cho các thành phần <input />

Sự khác nhau giữa HTML4.01 và HTML5

HTML4.01 HTML5
- Trong HTML5 có một số thuộc tính mới, và một số thay đổi cách dùng trong thuộc tính.

Cấu trúc

Tag <input /> phải được viết bên trong một tag <form>

<form action="#">
<input type="" />
</form>

Ví dụ

Xem thêm ví dụ

Html viết:

<form action="#">
<ul>
<li>Họ tên: <input type="text" value="" size="30" /></li>
<li>Email: <input type="text" value="" size="30" /></li>
<li>Ngày sinh: <input type="text" value="" size="10" /></li>
</ul>
<p><input type="submit" value="Gửi" /></p>
</form>

Hiển thị trình duyệt:

  • Họ tên:
  • Email:
  • Ngày sinh:

Các loại (type) <input />

Input dạng color (mới):

Hiển thị dạng bảng màu, giúp cho việc lựa chọn màu thuận tiện và chính xác hơn.

Trình duyệt hỗ trợ

  • Internet Explorer10
  • Firefox14
  • Opera11
  • Google Chrome20
  • Safari6.0

Hệ điều hành của thiết bị di động và máy tính bảng

  • IOS4.0
  • Android2.2
  • Window Phone8

<input type="color" name="" />

Xem ví dụ

Input dạng date (mới):

Hiển thị dạng bảng ngày tháng, giúp cho việc lựa chọn ngày tháng thuận tiện và chính xác hơn.

Trình duyệt hỗ trợ

  • Internet Explorer10
  • Firefox14
  • Opera10
  • Google Chrome20
  • Safari5.1

Hệ điều hành của thiết bị di động và máy tính bảng

  • IOS4.0
  • Android2.2
  • Window Phone8

<input type="date" name="" />

Xem ví dụ

Input dạng datetime (mới):

Hiển thị dạng ngày tháng, giúp cho việc lựa chọn ngày tháng thuận tiện và chính xác hơn.

Trình duyệt hỗ trợ

  • Internet Explorer10
  • Firefox14
  • Opera10
  • Google Chrome20
  • Safari5.1

Hệ điều hành của thiết bị di động và máy tính bảng

  • IOS4.0
  • Android2.2
  • Window Phone8

<input type="datetime" name="" />

Xem ví dụ

Input dạng datetime-local (mới):

Hiển thị dạng ngày tháng theo vùng, giúp cho việc lựa chọn ngày tháng theo vùng thuận tiện và chính xác hơn.

Trình duyệt hỗ trợ

  • Internet Explorer10
  • Firefox14
  • Opera10
  • Google Chrome20
  • Safari5.1

Hệ điều hành của thiết bị di động và máy tính bảng

  • IOS4.0
  • Android2.2
  • Window Phone8

<input type="datetime-local" name="" />

Xem ví dụ

Input dạng email (mới):

Dạng email giúp cho trình duyệt hiểu đúng dạng nhập vào là email, dạng này được hỗ trợ đa số các trình duyệt.

Trình duyệt hỗ trợ

  • Internet Explorer10
  • Firefox4
  • Opera10
  • Google Chrome6
  • Safari5.1

Hệ điều hành của thiết bị di động và máy tính bảng

  • IOS3.1
  • Android2.1
  • Window Phone8

<input type="email" name="" />

Xem ví dụ

Input dạng month (mới):

Hiển thị dạng tháng, giúp cho việc lựa chọn tháng thuận tiện và chính xác hơn.

Trình duyệt hỗ trợ

  • Internet Explorer10
  • Firefox14
  • Opera10
  • Google Chrome20
  • Safari5.1

Hệ điều hành của thiết bị di động và máy tính bảng

  • IOS4.0
  • Android2.2
  • Window Phone8

<input type="month" name="" />

Xem ví dụ

Input dạng number (mới):

Hiển thị dạng số, giúp cho việc xác định số thuận tiện và chính xác hơn.

Trình duyệt hỗ trợ

  • Internet Explorer10
  • Firefox14
  • Opera10
  • Google Chrome6
  • Safari5.1

Hệ điều hành của thiết bị di động và máy tính bảng

  • IOS4.0
  • Android2.2
  • Window Phone8

<input type="number" name="" min="3" max="10" step="" />

thuộc tính min, max và step không bắt buộc.

Xem ví dụ

Input dạng range (mới):

Hiển thị dạng dãy số, giúp cho việc xác định số thuận tiện và chính xác hơn.

Trình duyệt hỗ trợ

  • Internet Explorer10
  • Firefox14
  • Opera10
  • Google Chrome6
  • Safari5.1

Hệ điều hành của thiết bị di động và máy tính bảng

  • IOS4.0
  • Android1.5
  • Window Phone8

<input type="range" name="" min="3" max="10" step="" />

thuộc tính min, max và step cần phải có.

Xem ví dụ

Input dạng search (mới):

Giúp cho trình duyệt hiểu trường nhập vào được sử dụng cho truy vấn tìm kiếm.

Trình duyệt hỗ trợ

  • Internet Explorer10
  • Firefox4
  • Opera11
  • Google Chrome6
  • Safari5.1

Hệ điều hành của thiết bị di động và máy tính bảng

  • IOS3.1
  • Android1.5
  • Window Phone8

<input type="search" name="".

Xem ví dụ

Input dạng tell (mới):

Giúp cho trình duyệt hiểu trường nhập vào có kiểu số điện thoại.

Trình duyệt hỗ trợ

  • Internet Explorer10
  • Firefox4
  • Opera11
  • Google Chrome6
  • Safari5.1

Hệ điều hành của thiết bị di động và máy tính bảng

  • IOS3.1
  • Android2.1
  • Window Phone8

<input type="tell" name="".

Xem ví dụ

Input dạng time (mới):

Hiển thị dạng thời gian, giúp cho việc lựa chọn thời gian thuận tiện và chính xác hơn.

Trình duyệt hỗ trợ

  • Internet Explorer10
  • Firefox14
  • Opera10
  • Google Chrome20
  • Safari5.1

Hệ điều hành của thiết bị di động và máy tính bảng

  • IOS4.0
  • Android2.0
  • Window Phone8

<input type="time" name="" />

Xem ví dụ

Input dạng url (mới):

Giúp cho trình duyệt hiểu trường nhập vào có kiểu là một url.

Trình duyệt hỗ trợ

  • Internet Explorer10
  • Firefox4
  • Opera10
  • Google Chrome6
  • Safari5.1

Hệ điều hành của thiết bị di động và máy tính bảng

  • IOS3.1
  • Android2.1
  • Window Phone8

<input type="url" name="".

Xem ví dụ

Input dạng week (mới):

Hiển thị dạng tuần, giúp cho việc lựa chọn các tuần thuận tiện và chính xác hơn.

Trình duyệt hỗ trợ

  • Internet Explorer10
  • Firefox14
  • Opera10
  • Google Chrome20
  • Safari5.1

Hệ điều hành của thiết bị di động và máy tính bảng

  • IOS4.0
  • Android2.2
  • Window Phone8

<input type="week" name="" />

Xem ví dụ

Input dạng text:

Sử dụng để nhập giá trị text.

<input type="text" name="" value="" size="30" />

Xem thêm ví dụ

Input dạng password:

Text hiển thị bên trong dưới dạng password.

<input type="password" name="" value="" size="30" />

Xem thêm ví dụ

Input dạng hidden:

Dạng này sẽ không hiển thì ra trình duyệt.
Được sử dụng khi không muốn dữ liệu bị thay đổi.

<input type="hidden" name="" value="" size="30" />

Input dạng checkbox:

Được sử dụng cho nhiều lựa chọn khác nhau.

<input type="checkbox" name="" value="" />
<input type="checkbox" name="" value="" />


Xem thêm ví dụ

Input dạng radio:

Được sử dụng cho một chọn lựa duy nhất.
Các <input /> phải cùng "name", nếu không sẽ không chọn được.

<input type="radio" name="checkbox" value="" />
<input type="radio" name="checkbox" value="" />


Xem thêm ví dụ

Input dạng button:

Sử dụng như một nút nhấn.

<input type="button" name="" value="Click" />

Input dạng button reset:

Dùng để reset lại giá trị trong <form>.

<input type="reset" name=""" value="Reset" />

Input dạng button submit:

Dùng để gửi dữ liệu lên server, dữ liệu được gửi thông qua thuộc tính action trong <form>.

<input type="submit" name=""" value="Submit" />

Input dạng image:

Sử dụng như một nút nhấn bằng hình.

<input type="image" src="images/btn_submit.jpeg" alt="SUBMIT" name="" />

Input dạng file upload:

Sử dụng để upload file.

<input type="file" name="" />

Trình duyệt hỗ trợ

  • Internet Explorer 6
  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

<input /> được hỗ trợ trong đa số các trình duyệt.

Các thuộc tính của <input /> (mới trong HTML5) được hỗ trợ bởi trình duyệt và hệ điều hành:

  Internet Explorer Firefox Opera Chrome Safari IOS Android Window Phone
autocomplete 10 4 10 14 6.0 6.0 X 8
autofocus 10 4 10 6 5.1 3.1 1.5 8
form X 4 10 10 5.1 5.1 4.0 X
formaction 10 4 10.5 10 5.1 5.1 4.0 8
formenctype 10 4 10.5 10 5.1 5.1 4.0 8
formmethod 10 4 10.5 10 5.1 5.1 4.0 8
formnovalidate 10 4 10.5 6 5.1 4.0 2.2 8
formtarget 10 4 10.5 10 5.1 5.1 4.0 8
height 9 X 12 21 X 6.0 X 7.5
list 10 4 10 20 5.1 X X 8
max X X 10 6 5.1 4.0 2.2 X
min X X 10 6 5.1 4.0 2.2 X
multiple 10 3.6 11 6 5.1 4.0 2.1 8
pattern 10 4 10 6 5.1 4.0 2.1 8
placeholder 10 4 11 6 5.1 4.0 2.1 8
required 10 4 10 6 5.1 4.0 2.1 8
step X X 10 6 5.1 4.0 2.2 X
type Xem thông tin bên bảng dưới
width 9 X 12 21 X 6.0 X 7.5

Giá trị type (mới trong HTML5) được hỗ trợ bởi trình duyệt và hệ điều hành:

  Internet Explorer Firefox Opera Chrome Safari IOS Android Window Phone
color X X 11 20 X 4.0 2.2 X
date X X 10 20 5.1 4.0 2.2 X
datetime X X 10 X 5.1 4.0 2.2 X
datetime-local X X 10 X 5.1 4.0 2.2 X
email 10 4 10 6 5.1 3.1 2.1 8
month X X 10 X 5.1 4.0 2.2 X
number 10 X 10 6 5.1 3.1 2.1 8
range 10 X 10 6 5.1 4.0 1.5 8
search 10 4 11 6 5.1 3.1 1.5 8
tel 10 4 11 6 5.1 3.1 2.1 8
time X X 10 X 5.1 4.0 2.2 X
url 10 4 10 6 5.1 3.1 2.1 8
week X X 10 X 5.1 4.0 2.2 X

Thuộc tính

Cách sử dụng: <input thuoctinh="giatri" />

Thuộc tính tùy chọn

Thuộc tính Giá trị Ví dụ Mô tả
Thuộc tính mới (Mới)
autocomplete on
off		 autocomplete="on" Xác định một trường nhập có kích hoạt tự động hay không.
autofocus autofocus autofocus="autofocus" Xác định một trường nhập được "focus" khi tải trang.
form Tên form form="formName" Xác định trường input thuộc về form nào.
formaction URL formaction=" confirm.php" Xác định trang khi action tới.
formenctype application/x-www-form-urlencoded

multipart/form-data

text/plain		 formenctype="text/plain" Xác định dữ liệu được mã hóa trước khi gửi tới máy chủ.
formmethod get
post		 formmethod="post" Xác định phương thức truyền dữ liệu tới máy chủ.
formnovalidate formnova lidate formnovalidate=" formnovalidate" Kiểm tra giá trị nhập trước khi gửi.
formtarget _blank
_self
_parent
_top		 formtarget="_blank" Xác định nơi để mở một link khi action dữ liệu.
height pixels
%		 height="50px" Xác định chiều cao của một <input />, chỉ sử dụng cho <input type="image">
list id datalist list="dataId" Xác định mối liên hệ tới một <datalist>.
max Số
Ngày tháng		 max="300" Xác định giá trị lớn nhất của một <input />
min Số
Ngày tháng		 min="50" Xác định giá trị nhỏ nhất của một <input />
multiple multiple multiple="multiple" Xác định số người dùng nhiều hơn một.
pattern Giá trị định dạng pattern="[a-z]" Xác định giá trị đầu vào (một pattern hay một định dạng)
placeholder text placeholder="Chỉ nhập số" Xác định một gợi ý cho người dùng nhâp liệu.
required required required="required" Xác định giá trị bắt buộc của trường <input />
step số step="25" Xác định khoảng giá trị hợp lý cho trường <input />.
type color type="color" Xác định loại hiển thị dạng màu.
date type="date" Xác định loại hiển thị dạng ngày.
datetime type="datetime" Xác định loại hiển thị dạng ngày và thời gian.
datetime-local type="datetime-local" Xác định loại hiển thị dạng ngày và thời gian của vùng.
email type="email" Xác định loại hiển thị dạng email.
month type="month" Xác định loại hiển thị dạng tháng.
number type="number" Xác định loại hiển thị dạng số.
range type="range" Xác định loại hiển thị dạng dãy.
search type="search" Xác định loại hiển thị dạng tìm kiếm.
tel type="tel" Xác định loại hiển thị dạng số điện thoại.
time type="time" Xác định loại hiển thị dạng thời gian.
url type="url" Xác định loại hiển thị dạng đường dẫn.
week type="week" Xác định loại hiển thị dạng tuần.
width pixels
%		 width="100px" Xác định chiều rộng của một <input />
Thuộc tính như HTML4.01
alt Text alt="Đây là alt" Xác định alt cho image của <input /> (chỉ cho type="image")
checked checked  checked="checked" Xác định một thành phần <input /> được chọn trước khi tải trang (sử dụng đối với type="checkbox" hay type="radio")
disabled disabled disabled="disabled" Xác định một thành phần <input /> không hiển thị trước khi tải trang.
maxlength Số maxlength="50" Xác định số ký tự nhiều nhất được phép nhập của một trường <input /> (sử dụng đối với type="text" hay type="password")
name name name="inputName" Xác định tên cho thành phần <input />.
readonly readonly readonly="readonly" Xác định rằng trường <input /> chỉ được đọc (sử dụng đối với type="text" hay type="password")
size Số size="30" Xác định chiều rộng của một trường <input />.
src URL src="img/ btn_name.gif" Hiển thị đường dẫn của hình, hiển thị như một button submit.
type button type="button" Xác định loại hiển thị dạng nút nhấn.
checkbox type="checkbox" Xác định loại hiển thị dạng hộp kiểm.
file type="file" Xác định loại hiển thị dạng chọn file.
hidden type="hidden" Xác định loại hiển thị dạng ẩn.
image type="image" Xác định loại hiển thị dạng hình.
password type="password" Xác định loại hiển thị dạng password.
radio type="radio" Xác định loại hiển thị dạng chọn lựa.
reset type="reset" Xác định loại hiển thị dạng phục hồi.
submit type="submit" Xác định loại hiển thị dạng submit.
text type="text" Xác định loại hiển thị dạng text..
value Giá trị value="Gửi" Xác định giá trị của <input />.
Thuộc tính không hỗ trợ trong HTML5
align left
right
top
middle
bottom		 align="left" Không hỗ trợ trong HTML5.
Sử dụng thuộc tính text-align của css để thay thế.
Thuộc tính không được hỗ trợ trong phần lớn các trình duyệt
accept kiểu MIME accept="image/gif" Xác định loại tập tin có thể được gửi thông qua một tập tin tải lên (upload) (sử dụng đối với type="file").
Không được hỗ trợ trong phần lớn các trình duyệt.

Thuộc tính Tổng quát và thuộc tính sự kiện

Tất cả thuộc tính tổng quát và thuộc tính sự kiện được xác định trên phần lớn các thành phần HTML5

Link liên quan

Tag trước

Tag kế tiếp