Thẻ input là gì? Các thuộc tính của thẻ input trong HTML.

the input la gi 01

Có rất nhiều loại thẻ trong HTML như thẻ div, thẻ form, thẻ table,…Trong bài viết này, Blogchiase.vn sẽ giới thiệu đến bạn một loại thẻ thông dụng đó là thẻ Input. Vậy thẻ input 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é!

Thẻ input là gì?

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 dữ liệu. Các phần tử <input> được sử dụng bên trong 1 phần tử <form> để khai báo các điểu khiển đầu vào mà cho phép người dùng nhập dữ liệu.

Bài viết liên quan:

Thẻ div trong HTML

the input la gi 01
Thẻ input là gì? Các thuộc tính của thẻ input trong HTML.

Trường input có thể thay đổi theo nhiều cách, tùy thuộc vào giá trị của thuộc tính type.

Ví dụ về thẻ input trong HTML.

<form action=”#”>
First name: <input type=”text” name=”firstName”  placeholder=”enter firstname…”><br>
Last name: <input type=”text” name=”lastName” placeholder=”enter lastname…”><br>
<input type=”submit” value=”Submit”>
</form>

Kết quả:

the input la gi
Thẻ input là gì

Một số thuộc tính của thẻ input.

Thuộc tính type

Type là thuộc tính quan trọng nhất của thẻ input, nó sẽ quy định tính năng của thẻ input đó.

Một số giá trị của type:

  • text: trường nhập văn bản.
  • password: trường nhập mật khẩu, các kí tự nhập sẽ bị che đi bằng các kí tự *.
  • checkbox: ô checkbox.
  • radio: Ô radio button
  • submit: nút nhấn để submit form.

Một số giá trị trong HTML5:

  • number: Kiểu number
  • url: Kiểu đường dẫn trang web
  • email: Kiểu email

Còn nhiều giá trị nữa nhưng ở đây mình chỉ liệt kê một số giá trị hay sử dụng nhất.

Thuộc tính value.

Value cũng là một thuộc tính rất quan trọng của thẻ input, nó quy định giá trị của thẻ input.

Ví dụ: thuộc tính value của thẻ input

<form>
<h1> Login </h1>
Username: <input type=”text” name=”username” value=”Nhập username” >
<br />
Password: <input type=”passwword” name=”passwword” value=”Nhập password”>
<br />
<input type=”submit” name=”submit” value=”Đăng Nhập”>
</form>

Thuộc tính pattern:

Đây là thuộc tính rất hay, được thêm vào kể từ phiên bản HTML5.

Thuộc tính này giúp ta tạo ra các chuỗi pattern dùng để validate dữ liệu khi submit form. Xem thêm trong bài viết validate form bằng HTML5 để hiểu rõ hơn.

Những điểm cần nhớ.

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.

  Phần tử input là trống. Nó chỉ chứa các thuộc tính. Không cần thẻ kết thúc trong HTML.

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

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

HTML 5 không hỗ trợ thuộc tính “align”. Có một và thuộc tính mới cho thẻ <input> trong HMTL 5, và thuộc tính type có nhiều giá trị khác nhau.

Sự khác nhau giữa HTML và XHTML.

Trong HTML, thẻ <input> được sử dụng không cần phải có thẻ đóng. Trong XHTML, thẻ <input> phải có thẻ đóng.

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

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ử <input> 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ử <input> được focus tự động khi trang tải trang web
checked checked Đượ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”)
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ử <input> 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ử <input> 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ử <input> (chỉ đối với type=”image”)
list datalist_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
max number
date
Được dùng để chỉ định giá trị maximum cho một phần tử <input>
maxlength number Được dùng để chỉ định số ký tự lớn nhất được nhập vào phần tử <input>
min number
date
Được dùng để chỉ định một giá trị nhỏ nhất cho phần tử <input>
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ử <input>
name text Được dùng để chỉ định tên của một phần tử <input>
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ử <input>
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ử <input>
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ử <input>
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ử <input> để hiển thị
value text Được dùng để chỉ định giá trị của một phần tử <input>
width pixels Được dùng để chỉ định chiều rộng của một phần tử <input> (chỉ đối với type=”image”)

Bài viết liên quan:

Thuật ngữ là gì

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.

Trả lời

Email của bạn sẽ không được hiển thị công khai.