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

15/07/2022
Banner hosting giá rẻ dành cho sinh viên

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 <input> 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ử <input> được sử dụng bên trong 1 phần tử gọi là <form>; để 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:
<form action="#">
<input type="" />
</form>
  • Ví dụ:
<form action="#">
<ul>
<li>Họ tên: <input type="text" value="" size="25" /></li>
<li>Email: <input type="text" value="" size="25" /></li>
<li>Ngày sinh: <input type="text" value="" size="8" /></li>
</ul>
<p><input type="submit" value="Gửi ngay" /></p>
</form>
  • Dạng của <input /> 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 <label> để tạo nhãn cho các thành phần <input />
Thẻ input trong HTML là gì?
Thẻ input trong HTML là gì?

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

Banner Hosting Cao Cấp dành cho SEOer

Các loại (type) <input /> 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ợ.

  • Nhập text
Code mẫu: <input name="hoten" type="text" />
  • Nhập password
Code mẫu: <input name="psw" type="password" />
  • File đính kèm
Code mẫu: <input type="file" name="anh">
  • Button reset

Code mẫu:

<form action="#">
Thành phố: <input type="text" name="thành phố"><br />
Nơi cư trú: <input type="text" name="nơi cư trú"><br />
<input type="reset" value="Reset">
</form>
  • Button submit

Code mẫu:

<form action="#">
Tên trường học: <input name="tentruonghoc" type="text" /><br />
Giáo viên chủ nhiệm: <input name="giaovienchunhiem" type="text" /><br />
<input type="send" value="Send" />
</form>
  • Ẩn input

Code mẫu:

<form action="#">
Họ tên đầy đủ: <input type="text" name="hotendaydu"><br>
<input type="hidden" name="quocgia" value="Hàn Quốc">
<input type="submit" value="Submit">
</form>
  • Radio button

Code mẫu:

<form action="#">
<input name="quequan" type="radio" value="Bình Định" />Bình Định<br />
<input name="quequan" type="radio" value="Gia Lai" />Gia Lai<br />
<input name="gioitinh" type="radio" value="Phú Yên" />Phú Yên<br />
</form>
  • Checkbox

Code mẫu:

<form action="#">
<input name="thethao" type="checkbox" value="Tennis" />Tennis<br />
<input name="thethao" type="checkbox" value="Quần vợt" />Quần vợt<br />
<input name="thethao" type="checkbox" value="Bóng rổ" />Bóng rổ<br />
<input name="thethao" type="checkbox" value="Bóng bàn" />Bóng bàn<br />
<input name="thethao" type="checkbox" value="Karate" />Karate
</form>

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

  • Input dạng text (maxlength)
<input type="text" name="" value="" size="25" maxlength="15" />

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

  • Input dạng password
<input type="password" name="" value="" size="25" />

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

Input dạng password
Input dạng password
  • Input dạng hidden
<input type="hidden" name="" value="" size="25" />

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 hidden
Input dạng hidden
  • Input dạng checkbox (checked)
<input type="checkbox" name="" value="" checked="checked" />
<input type="checkbox" name="" value="" />

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

Input dạng checkbox (checked)
Input dạng checkbox (checked)
  • Input dạng radio (checked)
<input type="checkbox" name="" value="" checked="checked" />
<input type="checkbox" name="" value="" />

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

Input dạng radio
Input dạng radio
  • Input dạng file upload:
<input type="file" name="" />

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

Input dạng file upload
Input dạng file upload
  • Input dạng button image
<input type="image" src="images/btn_submit.jpeg" alt="SUBMIT" name="" />

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

Input dạng button image
Input dạng button image
  • Input dạng button submit
<input type="submit" name="" value="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 <form>.

Input dạng button submit
Input dạng button submit

Input dạng button reset

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

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

Input dạng button reset
Input dạng button reset
  • Input dạng button
<input type="button" name="" value="Click" />

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

Input dạng button
Input dạng button

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

Banner Hosting Giá Rẻ dành cho cá nhân

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ínhkhô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ínhGiá trịMô tả
acceptfile_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”)
alignleft
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”)
alttextĐược dùng để chỉ định một văn bản thay thế cho hình ảnh (chỉ khi type=”image”)
autocompleteon
off
Được dùng để chỉ định một phần tử <input> có cần phải bật tính năng tự động hoàn tất
autofocusauto
focus
Được dùng để chỉ  định rằng một phần tử <input> được focus tự động khi trang tải trang web
checkedcheckedĐược dùng để chỉ định rằng một phần tử <input> có được chọn trước (pre-selected) khi tải trang web (đối với type=”checkbox” hoặc type=”radio”)
dirnameinputname.dirĐược dùng để chỉ định rằng hướng văn bản sẽ được gửi
disableddisabledĐược dùng để chỉ định rằng một phần tử <input> bị vô hiệu hóa
formform_idĐược dùng để chỉ định một hoặc nhiều form mà có phần tử <input> thuộc về nó
formactionURLĐượ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”)
formenctypeapplication/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”)
formmethodget
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”)
formnovalidateformnovalidateĐượ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”)
heightpixelsĐược dùng để chỉ định chiều cao của một phần tử <input> (chỉ đối với type=”image”)
listdatalist_idĐược dùng để tham chiếu đến một phần tử <datalist> chứa các tùy chọn được định nghĩa trước
maxnumber
date
Được dùng để chỉ định giá trị maximum cho một phần tử <input>
maxlengthnumberĐược dùng để chỉ định số ký tự lớn nhất được nhập vào phần tử <input>
minnumber
date
Được dùng để chỉ định một giá trị nhỏ nhất cho phần tử <input>
multiplemultipleĐượ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ử <input>
nametextĐược dùng để chỉ định tên của một phần tử <input>
patternregexpĐượ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ử <input>
placeholdertextĐượ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ử <input>
readonlyreadonlyĐược dùng để chỉ định rằng một trường input là read-only
requiredrequiredĐược dùng để chỉ định rằng một trường input phải được nhập trước khi gửi form
sizenumberĐược dùng để chỉ định chiều rộng theo ký tự của một phần tử <input>
srcURLĐược dùng để chỉ định URL để sử dụng như 1 nút gửi (chỉ đối với type=”image”)
stepnumberĐược dùng để chỉ định các khoảng cách số hợp lệ cho một trường nhập
typebutton
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ử <input> để hiển thị
valuetextĐược dùng để chỉ định giá trị của một phần tử <input> 
widthpixelsĐược dùng để chỉ định chiều rộng của một phần tử <input> (chỉ đối với type=”image”)
Hosting Cao Cấp dành cho Web Developer

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.

ChromeFirefoxMicrosoft EdgeOperaSafariAndroid
Các trình duyệt hỗ trợ thẻ input
Các trình duyệt hỗ trợ thẻ input

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.

5/5 - (1 bình chọn)
Banner Hosting Giá Rẻ tại Vietnix
Mình là Bo - admin của Quản Trị Linux. Mình đã có 10 năm làm việc trong mảng System, Network, Security và đã trải nghiệm qua các chứng chỉ như CCNP, CISSP, CISA, đặc biệt là chống tấn công DDoS. Gần đây mình trải nghiệm thêm Digital Marketing và đã hòan thành chứng chỉ CDMP của PearsonVUE. Mình rất thích được chia sẻ và hỗ trợ cho mọi người, nhất là các bạn sinh viên. Hãy kết nối với mình nhé!
Theo dõi
Thông báo của
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận

Yêu cầu Vietnix gọi lại

Vui lòng nhập thông tin để chúng tôi liên hệ lại với bạn