<input>: The HTML Input element

Try it

<label for="name">Name (4 to 8 characters):</label>

<input
  type="text"
  id="name"
  name="name"
  required
  minlength="4"
  maxlength="8"
  size="10" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Các loại <input>

Cách hoạt động của <input> thay đổi đáng kể tùy theo giá trị của thuộc tính type, vì vậy các loại khác nhau được đề cập trong các trang tham khảo riêng. Nếu thuộc tính này không được chỉ định, loại mặc định là text.

Các loại có sẵn như sau:

<input type="button" name="button" value="Button" />

<input type="checkbox" name="checkbox"/>

<input type="color" name="color"/>

<input type="date" name="date"/>

<input type="datetime-local" name="datetime-local"/>

<input type="email" name="email"/>

<input type="file" accept="image/*, text/*" name="file"/>

<input id="userId" name="userId" type="hidden" value="abc123" />

<input type="image" name="image" src="" alt="image input"/>

<input type="month" name="month"/>

<input type="number" name="number"/>

<input type="password" name="password"/>

<input type="radio" name="radio"/>

<input type="range" name="range" min="0" max="25"/>

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

<input type="search" name="search"/>

<input type="submit" name="submit"/>

<input type="tel" name="tel"/>

<input type="text" name="text"/>

<input type="time" name="time"/>

<input type="url" name="url"/>

<input type="week" name="week"/>

<input type="datetime" name="datetime"/>

Thuộc tính

Phần tử <input> rất mạnh mẽ nhờ các thuộc tính của nó; thuộc tính type, được mô tả với các ví dụ ở trên, là quan trọng nhất. Vì mọi phần tử <input>, bất kể loại nào, đều dựa trên giao diện HTMLInputElement, về mặt kỹ thuật chúng chia sẻ cùng một tập hợp thuộc tính. Tuy nhiên, trên thực tế, hầu hết các thuộc tính chỉ có tác dụng trên một tập con cụ thể của các loại input.

Bảng dưới đây liệt kê tất cả các thuộc tính với mô tả ngắn gọn, tiếp theo là danh sách mô tả chi tiết từng thuộc tính:

Các thuộc tính riêng lẻ

accept

Chỉ hợp lệ cho loại input file, thuộc tính accept xác định loại tệp nào có thể được chọn trong điều khiển tải lên file. Xem loại input file.

alpha Experimental

Chỉ hợp lệ cho loại input color, thuộc tính alpha cung cấp cho người dùng cuối khả năng đặt độ trong suốt của màu đang được chọn.

alt

Chỉ hợp lệ cho nút image, thuộc tính alt cung cấp văn bản thay thế cho hình ảnh, hiển thị giá trị của thuộc tính nếu src bị thiếu hoặc không tải được. Xem loại input image.

autocapitalize

Kiểm soát liệu văn bản nhập vào có được viết hoa tự động hay không. Xem trang thuộc tính toàn cục autocapitalize.

autocomplete

(Không phải thuộc tính Boolean!) Thuộc tính autocomplete nhận giá trị là chuỗi phân cách bằng khoảng trắng mô tả loại chức năng autocomplete mà input cần cung cấp. Xem autocomplete cho các giá trị được phép.

autofocus

Thuộc tính Boolean, nếu có, chỉ ra rằng input sẽ tự động nhận focus khi trang tải xong.

Note: Phần tử có thuộc tính autofocus có thể nhận focus trước khi sự kiện DOMContentLoaded được kích hoạt.

Warning: Tự động focus vào điều khiển biểu mẫu có thể gây nhầm lẫn cho người dùng khiếm thị dùng công nghệ đọc màn hình và người dùng có khiếm khuyết nhận thức.

capture

Chỉ hợp lệ cho loại input file, thuộc tính capture xác định media nào — microphone, video, hay camera — sẽ được dùng để chụp tệp mới cho việc tải lên.

checked

Hợp lệ cho cả radio và checkbox, checked là thuộc tính Boolean. Nếu có trên loại radio, cho biết nút radio đó đang được chọn trong nhóm. Nếu có trên checkbox, cho biết checkbox mặc định được chọn khi trang tải.

colorspace Experimental

Chỉ hợp lệ cho loại input color, thuộc tính colorspace xác định không gian màu được sử dụng. Giá trị có thể là "limited-srgb" (mặc định) hoặc "display-p3".

dirname

Hợp lệ cho hidden, text, search, url, tel, và email, thuộc tính dirname cho phép gửi hướng của phần tử. Khi được bao gồm, điều khiển biểu mẫu sẽ gửi hai cặp name/value.

disabled

Thuộc tính Boolean, nếu có, chỉ ra rằng người dùng không thể tương tác với input. Input bị vô hiệu hóa thường được hiển thị với màu tối hơn.

form

Chuỗi chỉ định phần tử <form> mà input được liên kết. Giá trị phải khớp với id của phần tử <form> trong cùng tài liệu.

formaction

Chỉ hợp lệ cho loại input image và submit. Xem loại input submit.

formenctype

Chỉ hợp lệ cho loại input image và submit. Xem loại input submit.

formmethod

Chỉ hợp lệ cho loại input image và submit. Xem loại input submit.

formnovalidate

Chỉ hợp lệ cho loại input image và submit. Xem loại input submit.

formtarget

Chỉ hợp lệ cho loại input image và submit. Xem loại input submit.

height

Chỉ hợp lệ cho nút input image, height là chiều cao của tệp hình ảnh để hiển thị. Xem loại input image.

id

Thuộc tính toàn cục hợp lệ cho tất cả phần tử, định nghĩa định danh duy nhất (ID) phải là duy nhất trong toàn bộ tài liệu.

inputmode

Giá trị toàn cục hợp lệ cho tất cả phần tử, cung cấp gợi ý cho trình duyệt về cấu hình bàn phím ảo khi chỉnh sửa phần tử này. Các giá trị bao gồm none, text, tel, url, email, numeric, decimal, và search.

list

Giá trị của thuộc tính list phải là id của phần tử <datalist> trong cùng tài liệu. <datalist> cung cấp danh sách các giá trị được định nghĩa trước để gợi ý cho người dùng.

max

Hợp lệ cho date, month, week, time, datetime-local, number, và range, xác định giá trị lớn nhất trong phạm vi giá trị được phép.

maxlength

Hợp lệ cho text, search, url, tel, email, và password, xác định độ dài chuỗi tối đa (tính bằng đơn vị mã UTF-16) mà người dùng có thể nhập vào trường.

min

Hợp lệ cho date, month, week, time, datetime-local, number, và range, xác định giá trị nhỏ nhất trong phạm vi giá trị được phép.

minlength

Hợp lệ cho text, search, url, tel, email, và password, xác định độ dài chuỗi tối thiểu mà người dùng có thể nhập vào trường.

multiple

Thuộc tính Boolean multiple, nếu được đặt, có nghĩa là người dùng có thể nhập địa chỉ email phân cách bằng dấu phẩy trong widget email hoặc chọn nhiều tệp với input file.

name

Chuỗi chỉ định tên cho điều khiển input. Tên này được gửi cùng với giá trị điều khiển khi dữ liệu biểu mẫu được gửi.

pattern

Hợp lệ cho text, search, url, tel, email, và password, thuộc tính pattern được dùng để biên dịch biểu thức chính quy mà value của input phải khớp để vượt qua xác thực ràng buộc.

placeholder

Hợp lệ cho text, search, url, tel, email, password, và number, thuộc tính placeholder cung cấp gợi ý ngắn gọn cho người dùng về loại thông tin dự kiến trong trường.

popovertarget

Biến phần tử <input type="button"> thành nút điều khiển popover; nhận ID của phần tử popover cần điều khiển làm giá trị.

popovertargetaction

Chỉ định hành động thực hiện trên phần tử popover được điều khiển. Các giá trị có thể là "hide", "show", hoặc "toggle" (mặc định).

readonly

Thuộc tính Boolean, nếu có, chỉ ra rằng người dùng không thể chỉnh sửa giá trị của input.

required

required là thuộc tính Boolean, nếu có, chỉ ra rằng người dùng phải chỉ định giá trị cho input trước khi biểu mẫu có thể được gửi.

size

Hợp lệ cho email, password, tel, url, và text, thuộc tính size chỉ định bao nhiêu input được hiển thị.

src

Chỉ hợp lệ cho nút input image, src là chuỗi chỉ định URL của tệp hình ảnh cần hiển thị. Xem loại input image.

step

Hợp lệ cho date, month, week, time, datetime-local, number, và range, thuộc tính step là số chỉ định độ chi tiết mà giá trị phải tuân thủ.

switch Experimental Non-standard

Chỉ hợp lệ cho input checkbox, switch là thuộc tính Boolean chỉ ra liệu input checkbox có nên được hiển thị dưới dạng switch không.

tabindex

Thuộc tính toàn cục hợp lệ cho tất cả phần tử, một thuộc tính integer chỉ ra liệu phần tử có thể nhận focus input không.

title

Thuộc tính toàn cục hợp lệ cho tất cả phần tử bao gồm tất cả loại input, chứa văn bản thể hiện thông tin tư vấn liên quan đến phần tử.

type

Chuỗi chỉ định loại điều khiển cần hiển thị. Ví dụ, để tạo checkbox, sử dụng giá trị checkbox. Nếu bỏ qua, loại input text được sử dụng.

value

Giá trị của điều khiển input. Khi được chỉ định trong HTML, đây là giá trị ban đầu, và từ đó có thể được thay đổi hoặc truy xuất bất cứ lúc nào bằng JavaScript.

width

Chỉ hợp lệ cho nút input image, width là chiều rộng của tệp hình ảnh để hiển thị. Xem loại input image.

Thuộc tính không chuẩn

Các thuộc tính không chuẩn sau cũng có sẵn trên một số trình duyệt. Thông thường nên tránh sử dụng chúng trừ khi không có cách khác.

incremental Non-standard

Thuộc tính Boolean incremental là phần mở rộng WebKit và Blink, nếu có, báo cho user agent xử lý input như tìm kiếm trực tiếp.

orient Non-standard

Tương tự thuộc tính CSS không chuẩn -moz-orient, thuộc tính orient xác định hướng của thanh trượt range. Các giá trị bao gồm horizontal và vertical.

results Non-standard

Thuộc tính results — chỉ được hỗ trợ bởi Safari — là giá trị số cho phép ghi đè số lượng mục tối đa được hiển thị trong menu thả xuống của các truy vấn tìm kiếm trước đó.

webkitdirectory Non-standard

Thuộc tính Boolean webkitdirectory, nếu có, chỉ ra rằng chỉ có thể chọn thư mục. Xem HTMLInputElement.webkitdirectory để biết thêm chi tiết.

Phương thức

Các phương thức sau được cung cấp bởi giao diện HTMLInputElement:

checkValidity()

Trả về true nếu giá trị của phần tử vượt qua kiểm tra tính hợp lệ; ngược lại, trả về false và kích hoạt sự kiện invalid.

reportValidity()

Trả về true nếu giá trị của phần tử vượt qua kiểm tra tính hợp lệ; ngược lại, trả về false, kích hoạt sự kiện invalid, và báo cáo vấn đề cho người dùng.

select()

Chọn toàn bộ nội dung của phần tử <input>, nếu nội dung phần tử có thể được chọn.

setCustomValidity()

Đặt thông báo tùy chỉnh để hiển thị nếu giá trị của phần tử input không hợp lệ.

setRangeText()

Đặt nội dung của phạm vi ký tự được chỉ định trong phần tử input thành một chuỗi cho trước.

setSelectionRange()

Chọn phạm vi ký tự được chỉ định trong phần tử input văn bản.

showPicker()

Hiển thị bộ chọn trình duyệt cho phần tử input.

stepDown()

Giảm giá trị của input số đi một, theo mặc định, hoặc theo số đơn vị được chỉ định.

stepUp()

Tăng giá trị của input số lên một hoặc theo số đơn vị được chỉ định.

CSS

Input, là replaced elements, có một số tính năng không áp dụng cho các phần tử không phải biểu mẫu.

Pseudo-class giao diện người dùng

Ví dụ pseudo-class

Chúng ta có thể tạo kiểu cho nhãn checkbox dựa trên việc checkbox có được chọn hay không:

<input id="checkboxInput" type="checkbox" />
<label for="checkboxInput">Bật/tắt checkbox</label>

input:checked + label {
  color: red;
  font-weight: bold;
}

Bộ chọn thuộc tính

Có thể nhắm mục tiêu các loại điều khiển biểu mẫu khác nhau dựa trên type của chúng bằng bộ chọn thuộc tính:

/* khớp input password */
input[type="password"] {
}

/* khớp điều khiển biểu mẫu có phạm vi giá trị giới hạn */
input[min][max] {
}

/* khớp điều khiển biểu mẫu có thuộc tính pattern */
input[pattern] {
}

::placeholder

Theo mặc định, giao diện văn bản placeholder là xám nhạt hoặc trong suốt. Pseudo-element ::placeholder là văn bản placeholder của input.

::placeholder {
  color: blue;
}

caret-color

Thuộc tính CSS caret-color cho phép đặt màu dùng để vẽ dấu nháy nhập văn bản:

HTML

<label for="textInput">Lưu ý dấu nháy màu đỏ:</label>
<input id="textInput" class="custom" size="32" />

CSS

input.custom {
  caret-color: red;
  font:
    16px "Helvetica",
    "Arial",
    sans-serif;
}

Kết quả

field-sizing

Thuộc tính field-sizing cho phép kiểm soát hành vi kích thước của input biểu mẫu, cho phép các điều khiển biểu mẫu điều chỉnh kích thước để phù hợp với nội dung.

object-position và object-fit

Trong một số trường hợp (thường liên quan đến input không phải văn bản), phần tử <input> là replaced element. Khi đó, vị trí và kích thước của phần tử trong khung có thể được điều chỉnh bằng các thuộc tính CSS object-position và object-fit.

Tính năng bổ sung

Nhãn

Nhãn cần thiết để liên kết văn bản trợ giúp với <input>. Phần tử <label> cung cấp thông tin giải thích về trường biểu mẫu.

Nhãn liên kết

Việc ghép cặp <input> và <label> hữu ích cho công nghệ hỗ trợ như trình đọc màn hình. Bằng cách ghép cặp chúng bằng thuộc tính for của <label>, bạn liên kết nhãn với input.

<!-- không thể tiếp cận -->
<p>Nhập tên của bạn: <input id="name" type="text" size="30" /></p>

<!-- nhãn ngầm định -->
<p>
  <label>Nhập tên của bạn: <input id="name" type="text" size="30" /></label>
</p>

<!-- nhãn tường minh -->
<p>
  <label for="name">Nhập tên của bạn: </label>
  <input id="name" type="text" size="30" />
</p>

Placeholder không thể tiếp cận

Thuộc tính placeholder không phải là nhãn và không nên được dùng thay thế cho nhãn vì không thể tiếp cận được với trình đọc màn hình.

Xác thực phía client

Trình duyệt cung cấp xác thực phía client khi gửi biểu mẫu. Nếu có điều khiển biểu mẫu không vượt qua xác thực ràng buộc, các trình duyệt hỗ trợ sẽ hiển thị thông báo lỗi.

Đối tượng validityState bao gồm:

• validityState.valueMissing
• validityState.typeMismatch
• validityState.patternMismatch
• validityState.tooLong
• validityState.tooShort
• validityState.rangeUnderflow
• validityState.rangeOverflow
• validityState.stepMismatch
• validityState.badInput
• validityState.valid
• validityState.customError

function validate(input) {
  let validityState = input.validity;
  if (validityState.valueMissing) {
    input.setCustomValidity("A value is required");
  } else if (validityState.rangeUnderflow) {
    input.setCustomValidity("Your value is too low");
  } else if (validityState.rangeOverflow) {
    input.setCustomValidity("Your value is too high");
  } else {
    input.setCustomValidity("");
  }
}

Ví dụ lỗi xác thực tùy chỉnh

<form>
  <label for="name">Enter username (upper and lowercase letters): </label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+" />
  <button>Submit</button>
</form>

const nameInput = document.querySelector("input");

nameInput.addEventListener("input", () => {
  nameInput.setCustomValidity("");
  nameInput.checkValidity();
});

nameInput.addEventListener("invalid", () => {
  if (nameInput.value === "") {
    nameInput.setCustomValidity("Enter your username!");
  } else {
    nameInput.setCustomValidity(
      "Usernames can only contain upper and lowercase letters. Try again!",
    );
  }
});

Bản địa hóa

Các input được phép cho một số loại <input> phụ thuộc vào ngôn ngữ địa phương.

Khả năng tiếp cận

Nhãn

Khi bao gồm input, đây là yêu cầu về khả năng tiếp cận để thêm nhãn đi kèm. Điều này cần thiết để những người dùng công nghệ hỗ trợ có thể biết input dùng để làm gì.

<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="peas" />

Kích thước

Các phần tử tương tác như input biểu mẫu nên cung cấp khu vực đủ lớn để dễ dàng kích hoạt. Kích thước tương tác tối thiểu 44×44 CSS pixels được khuyến nghị.

Tóm tắt kỹ thuật

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• Thuộc tính CSS appearance
• Biểu mẫu HTML đầu tiên của bạn
• Cách cấu trúc biểu mẫu HTML
• Các widget biểu mẫu gốc
• Gửi dữ liệu biểu mẫu
• Xác thực ràng buộc biểu mẫu