Thẻ Input trong HTML là gì? Tổng hợp các ví dụ cụ thể

15 Tháng Bảy, 2022 243 lượt xem

Nội Dung ChínhĐịnh nghĩa và mục đích sử dụng thẻ Input trong HTMLCác loại (type) trong HTMLTổng hợp những ví dụ cụ thể về thẻ input trong HTMLNhững điểm cần lưu ý đối với thẻ inputCác thuộc tính của thẻ input trong HTML5 và HTMLTrình duyệt hỗ trợ thẻ inputLời kết Có rất nhiều loại … Tiếp tục đọc Thẻ Input trong HTML là gì? Tổng hợp các ví dụ cụ thể →

Có rất nhiều loại thẻ trong HTML như thẻ div, thẻ form, thẻ table,…Trong bài viết này, Vietnix sẽ giới thiệu đến bạn một loại thẻ thông dụng đó là thẻ Input. Vậy thẻ input trong HTML là gì? Thẻ này được sử dụng với mục đích gì? Thẻ input có những loại và thuộc tính nào. Cùng tìm hiểu nhé và xem các ví dụ cụ thể dưới đây nhé!

Định nghĩa và mục đích sử dụng thẻ Input trong HTML

Thẻ HTML hay thẻ input trong HTML được sử dụng để biểu diễn một trường input nơi mà người dùng có thể nhập được dữ liệu.
Các phần tử được sử dụng bên trong 1 phần tử gọi là

; để khai báo các điều khiển đầu vào mà tại đó cho phép người dùng nhập được dữ liệu.
Cấu trúc:



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

Dạng của có thể có rất nhiều dạng khác nhau, chúng tùy thuộc vào thuộc tính tùy chọn type, có thể là text, một checkbox, một trường password, một button radio, một button, …
Lời khuyên: Sử dụng tag để tạo nhãn cho các thành phần

>> Xem thêm: Thẻ a trong HTML là gì? Các thuộc tính của thẻ a thông dụng là gì?

Các loại (type) trong HTML

Các thẻ input trong html đều giống nhau về cấu trúc và chỉ khác nhau về type. Chính type này sẽ quyết định kiểu của input. Có đến hơn 20 type khác nhau. Có một số type input chỉ được hỗ trợ trong HTML5 mà thôi. Các type dưới đây là type được tất cả các trình duyệt thông dụng hỗ trợ.

Code mẫu:

Code mẫu:

Code mẫu:

Code mẫu:


Thành phố: 

Nơi cư trú:

Code mẫu:


Tên trường học: 

Giáo viên chủ nhiệm:

Code mẫu:


Họ tên đầy đủ:

Code mẫu:


Bình Định

Gia Lai

Phú Yên

Code mẫu:


Tennis

Quần vợt

Bóng rổ

Bóng bàn

Karate

Tổng hợp những ví dụ cụ thể về thẻ input trong HTML

Input dạng text (maxlength)

Để xác định chiều dài lớn nhất (trong ký tự) của một trường text hay password.

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

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

Input dạng checkbox (checked)

Dạng này thường được sử dụng cho nhiều lựa chọn khác nhau.

Input dạng radio (checked)

Dạng này thường được sử dụng cho một chọn lựa mặc định.

Input dạng file upload:

Dạng này được sử dụng để upload file.

Input dạng button image

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

Input dạng button submit

Được 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

Input dạng button reset

Được dùng để reset lại giá trị trong

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

>> Xem thêm: Thẻ iFrame trong HTML là gì? Cách sử dụng iFrame trong HTML

Những điểm cần lưu ý đối với thẻ input

Có 3 điểm cần lưu ý đối với thẻ input trong HTML sau đây:

Thứ nhất, sử dụng phần tử input bên trong phần tử form để khai báo các điều khiển đầu vào cho phép người dùng nhập dữ liệu.
Thứ hai, phần tử input là trống. Nó chỉ chứa các thuộc tính và không cần thẻ kết thúc trong HTML.
Thứ ba, nếu bạn muốn định nghĩa nhãn cho phần tử input, sử dụng phần tử label với mỗi thẻ input.

Các thuộc tính của thẻ input trong HTML5 và HTML

Bảng dưới đây giới thiệu chi tiết các thuộc tính của thẻ input trong HTML và HTML5:

Thuộc tính	Giá trị	Mô tả
accept	file_extension audio/* video/* image/* media_type	Dùng để chỉ định kiểu của file mà server chấp nhận (chỉ khi type=”file”)
align	left right top middle bottom	Thuộc tính align là một trong các thuộc tính không được hỗ trợ trong HTML5.Được dùng để chỉ định sự sắp hàng của image input (chỉ khi type=”image”)
alt	text	Được dùng để chỉ định một văn bản thay thế cho hình ảnh (chỉ khi type=”image”)
autocomplete	on off	Được dùng để chỉ định một phần tử có cần phải bật tính năng tự động hoàn tất
autofocus	auto focus	Được dùng để chỉ định rằng một phần tử được focus tự động khi trang tải trang web
checked	checked	Được dùng để chỉ định rằng một phần tử có được chọn trước (pre-selected) khi tải trang web (đối với type=”checkbox” hoặc type=”radio”)
dirname	inputname.dir	Được dùng để chỉ định rằng hướng văn bản sẽ được gửi
disabled	disabled	Được dùng để chỉ định rằng một phần tử bị vô hiệu hóa
form	form_id	Được dùng để chỉ định một hoặc nhiều form mà có phần tử thuộc về nó
formaction	URL	Được dùng để chỉ định URL của file sẽ xử lý các thông tin của form được gửi(đối với type=”submit” và type=”image”)
formenctype	application/x-www-form-urlencoded multipart/form-datatext/plain	Được dùng để chỉ định cách dữ liệu của form phải được mã hoá khi gửi nó lên máy chủ (đối với type=”submit” và type=”image”)
formmethod	get post	Được dùng để chỉ định nghĩa phương thức HTTP cho việc gửi dữ liệu của form tới action URL (đối với type=”submit” và type=”image”)
formnovalidate	formnovalidate	Được dùng để chỉ định nghĩa các phần tử của form không cần phải kiểm tra hợp lệ khi gửi
formtarget	_blank _self _parent _topframename	Được dùng để chỉ định nơi hiển thị những gì nhận được sau khi gửi form (đối với type=”submit” và type=”image”)
height	pixels	Được dùng để chỉ định chiều cao của một phần tử (chỉ đối với type=”image”)
list	datalist_id	Được dùng để tham chiếu đến một phần tử chứa các tùy chọn được định nghĩa trước
max	number date	Được dùng để chỉ định giá trị maximum cho một phần tử
maxlength	number	Được dùng để chỉ định số ký tự lớn nhất được nhập vào phần tử
min	number date	Được dùng để chỉ định một giá trị nhỏ nhất cho phần tử
multiple	multiple	Được dùng để chỉ định rằng người dùng có thể nhập nhiều hơn một giá trị cho phần tử
name	text	Được dùng để chỉ định tên của một phần tử
pattern	regexp	Được dùng để chỉ định một biểu thức chính quy được sử dụng để kiểm tra giá trị của phần tử
placeholder	text	Được dùng để chỉ định một gợi ý gắn mà mô tả giá trị mong đợi của một phần tử
readonly	readonly	Được dùng để chỉ định rằng một trường input là read-only
required	required	Được dùng để chỉ định rằng một trường input phải được nhập trước khi gửi form
size	number	Được dùng để chỉ định chiều rộng theo ký tự của một phần tử
src	URL	Được dùng để chỉ định URL để sử dụng như 1 nút gửi (chỉ đối với type=”image”)
step	number	Được dùng để chỉ định các khoảng cách số hợp lệ cho một trường nhập
type	button checkbox color date datetimelocal email file hidden image month number password radio range reset search submit tel text time url week	Được dùng để chỉ định kiểu của phần tử để hiển thị
value	text	Được dùng để chỉ định giá trị của một phần tử
width	pixels	Được dùng để chỉ định chiều rộng của một phần tử (chỉ đối với type=”image”)

Trình duyệt hỗ trợ thẻ input

Bảng dưới đây thể hiện các trình duyệt có hỗ trợ thẻ input.

Chrome

Firefox

Microsoft Edge

Opera

Safari

Android

Lời kết

Bài viết trên đã đem đến cho bạn những thông tin hữu ích về thẻ input trong HTML. Hy vọng qua bài viết này bạn sẽ hiểu rõ về thẻ input và sử dụng thẻ này một cách hiệu quả hơn.