Thẻ HTML <input>

Định nghĩa và cách sử dụng thẻ <input>

Thẻ <input> trong HTML là một thẻ được sử dụng để tạo một ô nhập liệu trong một form HTML. Nó có thể được sử dụng để tạo các loại ô nhập khác nhau, như ô nhập văn bản, nút radio, nút checkbox, v.v.

Cú pháp của thẻ <input>:

<input type="type" name="name" value="value">

Trong đó:

  • type là loại ô nhập, có thể là text, password, radio, checkbox, submit, reset...
  • name là tên của ô nhập, sẽ được sử dụng để xác định dữ liệu được nhập vào ô nhập này khi form được gửi đi.
  • value là giá trị mặc định của ô nhập, sẽ được hiển thị trong ô nhập khi trang web được tải lên.

Ví dụ:

<form>
  <label for="name">Tên:</label><br>
  <input type="text" id="name" name="name" value="Nhập tên của bạn"><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" value="Nhập email của bạn"><br>
  <input type="submit" value="Gửi">
</form> 

Phần tử <input> là phần tử biểu mẫu quan trọng nhất.

Phần tử <input> có thể được hiển thị theo nhiều cách, tùy thuộc vào thuộc tính type.

Các loại đầu vào khác nhau của input

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text"> (giá trị mặc định)
  • <input type="time">
  • <input type="url">
  • <input type="week">

Xem thuộc tính type để biết các ví dụ cho từng loại đầu vào!

Mẹo: Luôn sử dụng thẻ <label> để xác định nhãn cho <input type="text">, <input type="checkbox">, <input type="radio">, <input type="file">, and <input type="password">.

Hỗ trợ trình duyệt

Phần tử
<input>
Google ChromeMS EdgeFirefoxSafariOpera

Thuộc tính

Thuộc tínhGiá trịMô tả
acceptfile_extension
audio/*
video/*
image/*
media_type
Chỉ định bộ lọc cho loại file mà người dùng có thể chọn từ hộp thoại nhập file (chỉ dành cho type="file")
alttextChỉ định văn bản thay thế cho hình ảnh (chỉ dành cho type="image")
autocompleteon
off
Chỉ định xem phần tử <input> có được bật tính năng tự động hoàn thành hay không
autofocusautofocusChỉ định rằng một phần tử <input> sẽ tự động lấy tiêu điểm khi load trang
checkedcheckedChỉ định rằng một phần tử <input> sẽ được chọn trước khi load trang (cho type="checkbox" hoặc type="radio")
dirnameinputname.dirChỉ định rằng hướng văn bản sẽ được gửi
disableddisabledChỉ định rằng một phần tử <input> sẽ bị vô hiệu hóa
formform_idChỉ định dạng phần tử <input> thuộc về
formactionURLChỉ định URL của file sẽ xử lý kiểm soát đầu vào khi biểu mẫu được gửi (cho type="submit" và type="image")
formenctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain
Chỉ định cách dữ liệu biểu mẫu sẽ được mã hóa khi gửi nó đến máy chủ (cho type="submit" và type="image")
formmethodget
post
Xác định phương thức HTTP để gửi dữ liệu tới URL hành động (cho type="submit" và type="image")
formnovalidateformnovalidateXác định rằng các phần tử biểu mẫu không được xác thực khi gửi
formtarget_blank
_self
_parent
_top
framename
Chỉ định nơi hiển thị phản hồi nhận được sau khi gửi biểu mẫu (cho type="submit" và type="image")
heightpixelsChỉ định chiều cao của phần tử <input> (chỉ cho type="image")
listdatalist_idĐề cập đến phần tử <datalist> có chứa các tùy chọn được xác định trước cho phần tử <input>
maxnumber
date
Chỉ định giá trị tối đa cho phần tử <input>
maxlengthnumberChỉ định số ký tự tối đa được phép trong phần tử <input>
minnumber
date
Chỉ định giá trị tối thiểu cho phần tử <input>
minlengthnumberChỉ định số lượng ký tự tối thiểu được yêu cầu trong phần tử <input>
multiplemultipleChỉ định rằng người dùng có thể nhập nhiều hơn một giá trị trong phần tử <input>
nametextChỉ định tên của phần tử <input>
patternregexpChỉ định một biểu thức chính quy mà giá trị của phần tử <input> được kiểm tra với
placeholdertextChỉ định một gợi ý ngắn mô tả giá trị dự kiến của phần tử <input>
readonlyreadonlyChỉ định rằng một trường đầu vào là chỉ đọc
requiredrequiredChỉ định rằng một trường đầu vào phải được điền trước khi gửi biểu mẫu
sizenumberChỉ định chiều rộng, tính bằng ký tự, của phần tử <input>
srcURLChỉ định URL của hình ảnh để sử dụng làm nút gửi (chỉ dành cho type="image")
stepnumber
any
Chỉ định khoảng cách giữa các số hợp pháp trong một trường đầu vào
typebutton
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Chỉ định loại phần tử <input> để hiển thị
valuetextChỉ định giá trị của phần tử <input>
widthpixelsChỉ định chiều rộng của phần tử <input> (chỉ dành cho type="image")

Thuộc tính Global

Thẻ <input> cũng hỗ trợ các thuộc tính Global trong HTML.

Thuộc tính sự kiện

Thẻ <input> cũng hỗ trợ thuộc tính sự kiện trong HTML.

Ví dụ thêm về input

Để tạo một hộp kiểm để chọn nhiều lựa chọn, bạn có thể sử dụng thẻ input như sau:

<input type="checkbox" name="interests[]" value="books"> Sách
<input type="checkbox" name="interests[]" value="movies"> Phim
<input type="checkbox" name="interests[]" value="music"> Âm nhạc

Trong ví dụ trên, người dùng có thể chọn nhiều lựa chọn cho mục sở thích của họ bằng cách đánh dấu hộp kiểm tương ứng. Khi biểu mẫu được gửi, dữ liệu sẽ được gửi lên máy chủ dưới dạng một danh sách các lựa chọn đã chọn.

Bạn cũng có thể sử dụng thẻ input để tạo một nút radio để chọn một lựa chọn duy nhất trong một nhóm lựa chọn. Ví dụ, để tạo một nhóm nút radio cho giới tính, bạn có thể sử dụng thẻ input như sau:

<input type="radio" name="gender" value="male"> Nam
<input type="radio" name="gender" value="female"> Nữ
<input type="radio" name="gender" value="other"> Khác

Trong ví dụ trên, người dùng chỉ có thể chọn một lựa chọn cho giới tính của họ bằng cách đánh dấu nút radio tương ứng. Khi biểu mẫu được gửi, dữ liệu sẽ gửi lên máy chủ dưới dạng giá trị của nút radio được chọn.

Thẻ input còn có nhiều thuộc tính khác mà bạn có thể sử dụng để tùy chỉnh trường nhập của bạn. Ví dụ, bạn có thể sử dụng thuộc tính size để điều chỉnh kích thước của trường nhập, hoặc thuộc tính maxlength để giới hạn số lượng ký tự người dùng có thể nhập vào trường nhập.

Ví dụ, để tạo một trường nhập văn bản có kích thước là 30 ký tự và giới hạn số lượng ký tự người dùng có thể nhập là 100, bạn có thể sử dụng thẻ input như sau:

<input type="text" name="username" size="30" maxlength="100">

Thẻ input là một phần không thể thiếu trong các biểu mẫu HTML, và nó cung cấp nhiều tùy chọn để tùy chỉnh trường nhập theo nhu cầu của bạn. Tôi hy vọng rằng bạn đã hiểu được cách sử dụng thẻ input trong HTML và cách tùy chỉnh nó theo nhu cầu của bạn. Nếu có bất kỳ câu hỏi, vui lòng để lại trong comment dưới đây!

Thứ Hai, 26/12/2022 18:08
53 👨 131
0 Bình luận
Sắp xếp theo