Thẻ <input /> trong HTML

Thẻ <input /> trong HTML

  • 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.01HTML5
-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ụ

<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>

Kết quả:

  • 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ợ

39image-62

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

39image-63

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

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ợ

39image-70

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

39image-71

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

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ợ

39image-15

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

39image-16

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

Các thuộc tính Global

Thẻ này hỗ trợ tất cả các thuộc tính Global được miêu tả trong chương: Tổng hợp thuộc tính trong HTML

Các thuộc tính đặc trưng

Thẻ HTML <input> cũng hỗ trợ các thuộc tính sau:

Thuộc tínhGiá trịMiêu tả
acceptcontent typesXác định danh sách các kiểu nội dung phân biệt nhau bởi dấu phảy mà server chấp nhận.
alignleft
right
top
middle
bottom
Thuộc tính cũ- Định nghĩa sự căn chỉnh của nội dung.
alttextXác định văn bản được sử dụng trong trường hợp agent trình duyệt/người sử dụng không thể render điều khiển đầu vào.
autocomplete html-5on
off
Xác định có hay không autocomplete phần tử < input >.
autofocus html-5autofocusXác định rằng phần tử < input > nên tự động tìm trọng tâm khi trang load.
checkedcheckedNếu type="radio" hoặc type="checkbox" nó sẽ đã được chọn khi trang load.
disableddisabledDisable điều khiển đầu vào. Nút này sẽ không chấp nhận các thay đổi từ người sử dụng. Nó cũng không thể nhận trọng tâm và sẽ bị bỏ qua khi tab.
formhtml-5form_idXác định một hoặc nhiều form.
formaction html-5URLXác định địa chỉ URL của file mà sẽ xử lý điều khiển đầu vào khi form được chấp nhận.
formenctypehtml-5application/x-www-form-urlencoded
multipart/form-data
text/plain
Xác định cách dữ liệu form nên được mã hóa khi đệ trình nó tới server.
formmethod html-5post
get
Định nghĩa cách thức để gửi dữ liệu tới URL hoạt động.
formnovalidate html-5formnovalidateĐịnh nghĩa rằng các phần tử form không nên hiệu lực khi được đệ trình.
formtarget html-5_blank
_self
_parent
_top
Xác định mục tiêu, nơi mà phản hồi sẽ hiển thị, mà được nhận sau khi đệ trình form.
height html-5pixelsSpecifies the height
list html-5datalist_idXác định phần tử
max html-5autofocusXác định giá trị tối đa.
maxlengthSốXác định số ký tự tối đa được cho phép trong trường văn bản.
min html-5SốXác định giá trị nhỏ nhất.
multiple html-5multipleXác định rằng người sử dụng có thể nhập nhiều giá trị.
nametextAssigns a name to the input control.
pattern html-5regexpXác định một biểu thức thường mà giá trị của phần tử < input > được kiểm tra.
placeholder html-5textXác định một chỉ dẫn (hint) ngắn mà miêu tả giá trị mong đợi.
readonlyreadonlyThiết lập điều khiển đầu vào là chỉ đọc (read-only). Nó sẽ không cho phép người sử dụng thay đổi giá trị. Điều khiển, tuy nhiên có thể nhận trọng tâm (focus) và được bao gồm khi tab thông qua điều khiển form.
required html-5requiredXác định rằng một trường input phải được điền đầy đủ trước khi đệ trình form.
sizeSốXác định độ rộng của điều khiển. Nếu type="text" hoặc type="password", điều này liên quan đến độ rộng ký tự. Nếu không thì giá trị nó bằng pixel.
srcURLĐịnh nghĩa địa chỉ URL của hình ảnh để hiển thị. Chỉ được sử dụng cho type="image".
step html-5numberXác định khoảng cách số hợp pháp cho một trường đầu vào.
typebutton
checkboxcolor
date
datetime
datetime-local
email
file
hidden
image
month
Số
password
radio
range
reset
search
submit
tel
text
time
url
week
Xác định kiểu của điều khiển.
valuetextXác định giá trị khởi tạo cho điều khiển. Nếu type="checkbox" hoặc type="radio" thuộc tính này được yêu cầu.
width html-5pixelsXác định độ rộng.

Bình luận