Thẻ input trong HTML

Trong bài viết này Hãy cùng webaffiliatevn.com tìm hiểu Thẻ input trong HTML nhé     

1. Mô tả Thẻ input trong HTML:

Thẻ <input> HTML được sử dụng trong một biểu mẫu để khai báo một phần tử đầu vào – một điều khiển cho phép người dùng nhập dữ liệu.

2. Ví dụ Thẻ input trong HTML:

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ input trong HTML</title>
   </head>
	
   <body>
      <form action = "" method = "get">
         Họ: 
            <input type = "text" name = "ho" value = "" maxlength = "100" />
            <br />
            
        Tên: 
            <input type = "text" name = "ten" value = "" maxlength = "100" />
         <input type = "submit" value = "Gửi" />
      </form>
   </body>
	
</html>

See the Pen ZEWEZLz by DavidKhai (@davidkhai) on CodePen.dark

 

3. Thuộc tính Thẻ input trong HTML:

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

Thuộc tínhGiá trịSự miêu tả
accept

(chấp nhận)

content typesChỉ định danh sách các loại nội dung được phân tách bằng dấu phẩy mà máy chủ chấp nhận.
align

(căn chỉnh)

left
right
top
middle
bottom
Xác định sự căn chỉnh của nội dung
alttextĐiều này chỉ định văn bản sẽ được sử dụng trong trường hợp trình duyệt / tác nhân người dùng không thể hiển thị điều khiển đầu vào.
autocomplete (tự động hoàn thành)on
off
Chỉ định để bật hoặc tắt tính năng tự động hoàn thành trong phần tử <input>
autofocus

(tự động lấy nét)

autofocus (tự động lấy nét)chỉ định rằng phần tử <input> sẽ tự động lấy tiêu điểm khi trang tải
checked

(đã kiểm tra)

checked (đã kiểm tra)Nếu type = “radio” hoặc type = “checkbox” thì nó sẽ được chọn khi tải trang.
disabled (không hiển thị)disabledTắt kiểm soát đầu vào. Nút này sẽ không chấp nhận các thay đổi từ người dùng. Nó cũng không thể nhận tiêu điểm và sẽ bị bỏ qua khi tab.
formform_idChỉ định một hoặc nhiều hình thức
formaction (hình thành)URLChỉ định URL của tệp sẽ xử lý kiểm soát đầu vào khi biểu mẫu được gửi
formenctypeapplication/x-www-form-urlencoded

multipart/form-data

text/plain

Chỉ định cách dữ liệu biểu mẫu nên được mã hóa khi gửi nó đến phục vụ
formmethod (hình thức)post
get
Xác định phương thức HTTP để gửi dữ liệu đến URL hành động
formnovalidateformnovalidateXác định rằng các phần tử biểu mẫu sẽ không được xác thực khi gửi
formtarget_blank
_self
_parent
_top
Chỉ định mục tiêu nơi phản hồi sẽ được hiển thị nhận được sau khi gửi biểu mẫu
height

(chiều cao)

pixelsChỉ định chiều cao
list

(danh sách)

datalist_idChỉ định phần tử <datalist> chứa các tùy chọn được xác định trước cho phần tử <input>
max

(tối đa)

autofocus (tự động)Chỉ định giá trị tối đa.
maxlengthnumberXác định số lượng ký tự tối đa được phép trong trường văn bản
min

(tối thiểu)

numberChỉ định giá trị tối thiểu.
multiple (nhiều)multipleChỉ định rằng người dùng có thể nhập nhiều giá trị
nametextGán tên cho điều khiển đầu vào.
pattern

(mẫu)

regexpChỉ định một biểu thức chính quy mà giá trị của phần tử <input> được kiểm tra
placeholdertextChỉ định một gợi ý ngắn mô tả giá trị mong đợi.
readonly

(chỉ đọc)

chỉ đọcĐặt điều khiển đầu vào thành chỉ đọc. Nó sẽ không cho phép người dùng thay đổi giá trị. Tuy nhiên, điều khiển có thể nhận được tiêu điểm và được bao gồm khi lập bảng thông qua các điều khiển biểu mẫu.
required

(yêu cầu)

requiredChỉ định rằng một trường đầu vào phải được điền trước khi gửi biểu mẫu
size

(kích thước)

numberChỉ định chiều rộng của điều khiển. Nếu type = “text” hoặc type = “password” thì điều này đề cập đến chiều rộng tính bằng ký tự. Mặt khác, nó được tính bằng pixel.
srcURLXác định URL của hình ảnh để hiển thị. Chỉ được sử dụng cho loại = “hình ảnh”.
step

(bước)

numberChỉ định các khoảng số hợp pháp cho trường đầu vào
type

(kiểu)

button
checkboxcolor
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Chỉ định loại điều khiển.
value

(giá trị)

textChỉ định giá trị nguyên cho điều khiển. Nếu type = “checkbox” hoặc type = “radio” thì thuộc tính này là bắt buộc.
width 

(chiều rộng)

pixelsChỉ định chiều rộng

 

>>> Xem thêm:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *