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

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

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ợ

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

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

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

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

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

<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ính	Giá trị	Miêu tả
accept	content types	Xá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.
align	left right top middle bottom	Thuộc tính cũ- Định nghĩa sự căn chỉnh của nội dung.
alt	text	Xá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	on off	Xác định có hay không autocomplete phần tử < input >.
autofocus	autofocus	Xác định rằng phần tử < input > nên tự động tìm trọng tâm khi trang load.
checked	checked	Nếu type="radio" hoặc type="checkbox" nó sẽ đã được chọn khi trang load.
disabled	disabled	Disable đ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.
form	form_id	Xác định một hoặc nhiều form.
formaction	URL	Xá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.
formenctype	application/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	post get	Định nghĩa cách thức để gửi dữ liệu tới URL hoạt động.
formnovalidate	formnovalidate	Định nghĩa rằng các phần tử form không nên hiệu lực khi được đệ trình.
formtarget	_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	pixels	Specifies the height
list	datalist_id	Xác định phần tử
max	autofocus	Xác định giá trị tối đa.
maxlength	Số	Xác định số ký tự tối đa được cho phép trong trường văn bản.
min	Số	Xác định giá trị nhỏ nhất.
multiple	multiple	Xác định rằng người sử dụng có thể nhập nhiều giá trị.
name	text	Assigns a name to the input control.
pattern	regexp	Xác định một biểu thức thường mà giá trị của phần tử < input > được kiểm tra.
placeholder	text	Xác định một chỉ dẫn (hint) ngắn mà miêu tả giá trị mong đợi.
readonly	readonly	Thiế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	required	Xác định rằng một trường input phải được điền đầy đủ trước khi đệ trình form.
size	Số	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.
src	URL	Định nghĩa địa chỉ URL của hình ảnh để hiển thị. Chỉ được sử dụng cho type="image".
step	number	Xác định khoảng cách số hợp pháp cho một trường đầu vào.
type	button 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.
value	text	Xá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	pixels	Xác định độ rộng.