Thứ Sáu, Tháng Hai 7, 2025
spot_img
HomeAttributes of input elements in HTML

Attributes of input elements in HTML

.

value attribute

Thuộc tính value trong HTML được dùng để xác định một giá trị ban đầu cho thành phần nhập. Ví dụ bên dưới đã tạo một biểu mẫu lấy tên, tuổi và số liên lạc làm đầu vào từ người dùng. Bên trong thành phần input đã khởi tạo các giá trị cho tên, tuổi, số điện thoại. Khi chạy code bên dưới, bạn sẽ có biểu mẫu với dữ liệu được điền trước.








HTML attributes

readonly attribute

The readonly attribute specifies that the input data field can only be read (cannot be changed).

Thuộc tính disabled

Thuộc tính disabled xác định rằng trường dữ liệu đầu vào bị vô hiệu hóa, tức là không thể sử dụng, không thể click vào và giá trị cũng không được gửi khi biểu mẫu gửi đi.

Thuộc tính size

Thuộc tính size xác định kích thước (tính bằng kí tự) cho trường nhập dữ liệu.

Thuộc tính maxlength

Thuộc tính maxlength xác định độ dài tối đa cho trường nhập dữ liệu.

Với thuộc tính maxlength, trường dữ liệu đầu vào không chấp nhận nhiều hơn số kí tự đã định sẵn cũng không phản hồi lại cho người dùng khi mắc lỗi. Nếu muốn cảnh báo người dùng, bạn phải dùng JavaScript.

Các thuộc tính trong HTML5

HTML5 có bổ sung thêm các thuộc tính dưới đây cho phần tử

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

và các thuộc tính sau cho phần tử

Thuộc tính autocomple xác định liệu biểu mẫu hay trường nhập dữ liệu có tự động điền hay không. Nếu bật, trình duyệt sẽ tự động điền dựa trên giá trị đã nhập trước đó. Có thể bật/tắt khả năng tự điền theo từng trường dữ liệu. Với một số trình duyệt bạn phải bật chức năng này lên mới được.

Thuộc tính autocomplete hoạt động cùng với

và được dùng với type=”submit” và type=”image”. Dưới đây là ví dụ biểu mẫu HTML có 2 nút gửi với 2 hành động khác nhau.

Thuộc tính formenctype cho biết dữ liệu trong biểu mẫu sẽ được mã hóa thế nào khi gửi đi (chỉ áp dụng với các biểu mẫu có method=”post”). Thuộc tính này ghi đè thuộc tính enctype trong phần tử

và được dùng với type=”submit” và type=”image”.

Ví dụ dưới đây gửi dữ liệu được mã hóa mặc định (nút gửi thứ nhất) và mã hóa dưới dạng nhiều phần (nút gửi thứ hai).

Thuộc tính formmethod xác định phương thức HTTP để gửi dữ liệu tới URL, nó sẽ ghi đè thuộc tính method trong phần tử

và được dùng với type=”submit”. Đây là ví dụ với 2 nút gửi, có và không xác thực dữ liệu.

Thuộc tính formtarget cho biết tên hoặc từ khóa chỉ ra nơi hiển thị phản hồi khi người dùng gửi biểu mẫu đi, nó sẽ ghi đè lên thuộc tính target của phần tử

và được dùng với type=”submit” and type=”image”.

Thuộc tính height và width xác định chiều cao và độ rộng của phần tử . Hãy nhớ luôn xác định kích thước của ảnh.

list attribute reference to the element contains predefined selections of elements .

Min and max properties Specifies the minimum and maximum values ​​for the element Used with input data types: number, range, date, datetime, time, month, week.

Nhập ngày trước 1980-01-01:


Nhập ngày sau 01-01-2000:


Số lượng (giữa 1 và 5):

Multiple attribute Indicates whether the user can enter more than one value for the element no, used with email and file data types.

Chọn ảnh: 

pattern attribute indicates the regular expression that the element's value is Will have to check with, it works with data types: text, search, URL, phone number, email and password. Use the global title attributes for description:

Below is an example showing that the data entry field only accepts 3 letters (no numbers or special characters).

Mã quốc gia: 

Expression to check and respond when value does not meet requirements
Expression to check and respond when value does not meet requirements

Placeholder attribute suggests a certain value for the data input field (usually a sample value or a brief description of the format to be entered), displayed before the user enters data. It works with the following data types: text, search, URL, phone number, email, and password.

Make a value available as a sink
Make a value available as a sink

Required attribute Indicates that the data field must be entered to be able to submit the form, used with data types: text, search, URL, phone number, email, password, date selection, number, checkbox, round button, file believe.

Tên người dùng: 

Step attribute Indicates the distance between valid numeric values ​​in the element . For example, if step=”3” then the valid numbers will be -3, 0, 3, 6… This attribute can be used in combination with the min and max attributes to create a range of valid values.

This attribute is used with data types: number, range, date, datetime, month, time, week.

Summary table of input attributes and their values ​​in HTML

Attributes

Value

Describe

type

text. text
checkbox
radio
hidden
button. button
submit. submit
reset. reset
password. password
file

color. color
date. date
datetime-local
e-mail
search. search
image. image
month. month
number. number
range. range
tel
time. time
url
week

The type of input element created.

name

text. text

The name of the input element.

value. value

text. text

The value of the input element.

id

identifier

Specifies a unique identifier for the input.

class. class

classnames

Set up 1 or more CSS classes for input.

style. style

CSS-styles

Set style for input.

data-*

value. value

Defines additional data that JavaScript can use.

hidden

hidden

Determines whether the input is hidden or not.

title. title

text. text

Set the title to appear as a tooltip.

tabindex

index. index

Set tab sequence relative to other tab elements.

checked. checked

checked. checked

For styles: checkbox or radio. Makes a checked or optional selection.

placeholder

text. text

Short hint describing the expected value.

maxlength

number. number

Maximum number of characters allowed.

required. required

no value

Set input to the required field.

readonly

readonly

Make input read-only.

disabled. disabled

disabled. disabled

Disable input element.

autofocus

no value

Set focus on element after page load.

autocomplete

on | off

Presents previously entered values ​​to the user.

form

form-id

Reference to the form id belong.

formaction

URL

Type: submit and image. URL or path of the file, the sent data will be processed.

formtarget

_blank
_self
_parent
_top
framename

Type: submit and image. image. Indicates where the response is displayed

formenctype

application/x-www-form-urlencoded,
multipart/form-data,
text/plain

Type: submit. submit image. image. Encrypt data sent on the server

formmethod

get. get
post

Type: submit and image. image. HTTP sends form data.

formnovalidate

formnovalidate

Avoid forms being validated after submission

accept

file-extension
audio/*
video/*
image/*
media_type

Type: file. Indicates the file types that users can choose to upload.

min. min

number. number
date. date

Minimum value.

max

number. number
date. date

Maximum value.

step. step

number. number
any. any

Distance between valid numbers.

multiple. multiple

multiple. multiple

Allows the user to select more than 1 value from the selection.

pattern. pattern

regexp

Value of the element is checked against this element.

size

number. number

The width of the input element according to the number of characters.

width

pixels

Width of input element in pixels. Used by image. image

height

pixels

Height of the element in pixels. Used by image .

list. list

datalist-id

contains predefined options for the element .

dirname

inputname

Direction the text is sent.

Previous lesson: Input data types of input elements in HTML

Next article: Introduction to HTML5

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments