<input type="text">

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;
}

Giá trị

Thuộc tính value là chuỗi chứa giá trị hiện tại của văn bản được nhập vào trường văn bản. Bạn có thể lấy giá trị này bằng thuộc tính value của HTMLInputElement trong JavaScript.

let theText = myTextInput.value;

Nếu không có ràng buộc xác thực nào được áp dụng cho ô nhập (xem Xác thực để biết thêm chi tiết), giá trị có thể là chuỗi rỗng ("").

Thuộc tính bổ sung

Ngoài các thuộc tính toàn cục và các thuộc tính áp dụng cho tất cả các phần tử <input> bất kể kiểu, ô nhập văn bản hỗ trợ các thuộc tính sau.

list

Giá trị của thuộc tính list là id của một phần tử <datalist> nằm trong cùng tài liệu. <datalist> cung cấp danh sách các giá trị được xác định trước để gợi ý cho người dùng. Bất kỳ giá trị nào trong danh sách không tương thích với type sẽ không được đưa vào các tùy chọn gợi ý. Các giá trị được cung cấp là gợi ý, không phải yêu cầu: người dùng có thể chọn từ danh sách này hoặc cung cấp giá trị khác.

maxlength

Độ dài chuỗi tối đa (đo bằng đơn vị mã UTF-16) mà người dùng có thể nhập vào ô nhập text. Đây phải là giá trị nguyên từ 0 trở lên. Nếu không có maxlength được chỉ định, hoặc một giá trị không hợp lệ được chỉ định, ô nhập text không có độ dài tối đa. Giá trị này cũng phải lớn hơn hoặc bằng giá trị của minlength.

Ô nhập sẽ không vượt qua xác thực ràng buộc nếu độ dài giá trị văn bản của trường lớn hơn maxlength đơn vị mã UTF-16. Xác thực ràng buộc chỉ được áp dụng khi giá trị được thay đổi bởi người dùng.

minlength

Độ dài chuỗi tối thiểu (đo bằng đơn vị mã UTF-16) mà người dùng có thể nhập vào ô nhập text. Đây phải là giá trị nguyên không âm nhỏ hơn hoặc bằng giá trị được chỉ định bởi maxlength. Nếu không có minlength được chỉ định, hoặc một giá trị không hợp lệ được chỉ định, ô nhập text không có độ dài tối thiểu.

Ô nhập sẽ không vượt qua xác thực ràng buộc nếu độ dài văn bản nhập vào trường nhỏ hơn minlength đơn vị mã UTF-16. Xác thực ràng buộc chỉ được áp dụng khi giá trị được thay đổi bởi người dùng.

pattern

Thuộc tính pattern, khi được chỉ định, là biểu thức chính quy mà value của ô nhập phải khớp để vượt qua xác thực ràng buộc. Nó phải là biểu thức chính quy JavaScript hợp lệ, như được dùng bởi kiểu RegExp, và được ghi lại trong hướng dẫn biểu thức chính quy của chúng ta; cờ 'u' được chỉ định khi biên dịch biểu thức chính quy để mẫu được coi là chuỗi các điểm mã Unicode, thay vì ASCII. Không nên chỉ định dấu gạch chéo xung quanh văn bản mẫu.

Nếu mẫu được chỉ định không hợp lệ, không có biểu thức chính quy nào được áp dụng và thuộc tính này bị bỏ qua hoàn toàn.

Xem Chỉ định mẫu để biết thêm chi tiết và ví dụ.

placeholder

Thuộc tính placeholder là một chuỗi cung cấp gợi ý ngắn gọn cho người dùng về loại thông tin cần nhập vào trường. Nó phải là một từ hoặc cụm từ ngắn thể hiện kiểu dữ liệu mong đợi, thay vì một thông báo giải thích. Văn bản không được chứa ký tự xuống dòng hay dòng mới.

Nếu nội dung của điều khiển có một hướng (LTR hoặc RTL) nhưng cần hiển thị placeholder theo hướng ngược lại, bạn có thể dùng ký tự định dạng thuật toán bidirectional Unicode để ghi đè hướng trong placeholder; xem Cách sử dụng điều khiển Unicode cho văn bản bidi để biết thêm.

readonly

Thuộc tính Boolean, khi có mặt, có nghĩa là trường này không thể được chỉnh sửa bởi người dùng. Tuy nhiên, value của nó vẫn có thể được thay đổi bằng mã JavaScript trực tiếp đặt thuộc tính value của HTMLInputElement.

size

Thuộc tính size là giá trị số chỉ định số ký tự rộng của trường ô nhập. Giá trị phải là số lớn hơn không, và giá trị mặc định là 20. Vì độ rộng ký tự thay đổi, điều này có thể chính xác hoặc không và không nên dựa vào nó; ô nhập kết quả có thể hẹp hơn hoặc rộng hơn số ký tự được chỉ định, tùy thuộc vào ký tự và font chữ (cài đặt font đang được sử dụng).

Điều này không đặt giới hạn về số ký tự người dùng có thể nhập vào trường. Nó chỉ chỉ định xấp xỉ bao nhiêu ký tự có thể được nhìn thấy cùng một lúc. Để đặt giới hạn trên về độ dài dữ liệu nhập, hãy dùng thuộc tính maxlength.

spellcheck

Thuộc tính toàn cục spellcheck được dùng để chỉ định có bật kiểm tra chính tả cho phần tử hay không. Nó có thể được dùng trên bất kỳ nội dung có thể chỉnh sửa nào, nhưng ở đây chúng ta xem xét các đặc thù liên quan đến việc dùng spellcheck trên các phần tử <input>. Các giá trị được phép cho spellcheck là:

false

Tắt kiểm tra chính tả cho phần tử này.

true

Bật kiểm tra chính tả cho phần tử này.

"" (chuỗi rỗng) hoặc không có giá trị

Theo hành vi mặc định của phần tử cho kiểm tra chính tả. Điều này có thể dựa trên cài đặt spellcheck của cha hoặc các yếu tố khác.

Trường ô nhập có thể được bật kiểm tra chính tả nếu nó không có thuộc tính readonly được đặt và không bị vô hiệu hóa.

Giá trị được trả về khi đọc spellcheck có thể không phản ánh trạng thái thực tế của kiểm tra chính tả trong điều khiển, nếu tùy chọn của user agent ghi đè cài đặt.

Sử dụng ô nhập văn bản

Các phần tử <input> kiểu text tạo ra các ô nhập đơn giản, một dòng. Bạn nên dùng chúng bất cứ khi nào bạn muốn người dùng nhập giá trị một dòng và không có kiểu ô nhập cụ thể hơn để thu thập giá trị đó (ví dụ nếu đó là ngày, URL, email, hoặc thuật ngữ tìm kiếm, bạn có các tùy chọn tốt hơn).

Ví dụ cơ bản

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Điều này hiển thị như sau:

Khi được gửi, cặp tên/giá trị dữ liệu được gửi đến máy chủ sẽ là name=Chris (nếu "Chris" được nhập làm giá trị ô nhập trước khi gửi). Bạn phải nhớ bao gồm thuộc tính name trên phần tử <input>, nếu không giá trị của trường văn bản sẽ không được bao gồm trong dữ liệu được gửi.

Đặt placeholder

Bạn có thể cung cấp placeholder hữu ích bên trong ô nhập văn bản có thể cung cấp gợi ý về những gì cần nhập bằng thuộc tính placeholder. Hãy xem ví dụ sau:

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Bạn có thể thấy cách placeholder được hiển thị bên dưới:

Placeholder thường được hiển thị với màu nhạt hơn màu tiền cảnh của phần tử và tự động biến mất khi người dùng bắt đầu nhập văn bản vào trường (hoặc bất cứ khi nào trường có giá trị được đặt theo chương trình bằng cách đặt thuộc tính value).

Kích thước vật lý của phần tử ô nhập

Kích thước vật lý của hộp ô nhập có thể được kiểm soát bằng thuộc tính size. Với nó, bạn có thể chỉ định số ký tự mà ô nhập văn bản có thể hiển thị cùng một lúc. Điều này ảnh hưởng đến chiều rộng của phần tử, cho phép bạn chỉ định chiều rộng theo số ký tự thay vì pixel. Trong ví dụ này, ô nhập rộng 30 ký tự:

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word"
      size="30" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Xác thực

Các phần tử <input> kiểu text không có xác thực tự động nào được áp dụng (vì ô nhập văn bản cơ bản cần có khả năng chấp nhận bất kỳ chuỗi tùy ý nào), nhưng có một số tùy chọn xác thực phía máy khách có sẵn, mà chúng ta sẽ thảo luận bên dưới.

Ghi chú về tạo kiểu

Có các lớp giả hữu ích để tạo kiểu cho các phần tử biểu mẫu giúp người dùng biết khi nào giá trị của họ hợp lệ hay không hợp lệ. Đây là :valid và :invalid. Trong phần này, chúng ta sẽ dùng CSS sau, sẽ đặt dấu kiểm bên cạnh các ô nhập có giá trị hợp lệ và dấu chéo bên cạnh các ô nhập có giá trị không hợp lệ.

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Kỹ thuật này cũng yêu cầu phần tử <span> được đặt sau phần tử biểu mẫu, đóng vai trò là nơi chứa các biểu tượng. Điều này là cần thiết vì một số loại ô nhập trên một số trình duyệt không hiển thị các biểu tượng được đặt trực tiếp sau chúng rất tốt.

Yêu cầu nhập bắt buộc

Bạn có thể dùng thuộc tính required như một cách dễ dàng để yêu cầu nhập giá trị trước khi gửi biểu mẫu được phép:

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Điều này hiển thị như sau:

Nếu bạn cố gửi biểu mẫu mà không nhập tên người dùng, trình duyệt sẽ hiển thị thông báo lỗi.

Độ dài giá trị ô nhập

Bạn có thể chỉ định độ dài tối thiểu (tính bằng ký tự) cho giá trị nhập bằng thuộc tính minlength; tương tự, dùng maxlength để đặt độ dài tối đa của giá trị nhập, tính bằng ký tự.

Ví dụ dưới đây yêu cầu rằng giá trị nhập phải có độ dài từ 4–8 ký tự.

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="10"
      placeholder="Username"
      minlength="4"
      maxlength="8" />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Điều này hiển thị như sau:

Nếu bạn cố gửi biểu mẫu với ít hơn 4 ký tự, bạn sẽ nhận được thông báo lỗi phù hợp (khác nhau giữa các trình duyệt). Nếu bạn cố nhập nhiều hơn 8 ký tự, trình duyệt sẽ không cho phép bạn.

Chỉ định mẫu

Bạn có thể dùng thuộc tính pattern để chỉ định biểu thức chính quy mà giá trị nhập phải khớp để được coi là hợp lệ (xem Xác thực theo biểu thức chính quy để có khóa học cấp tốc về dùng biểu thức chính quy để xác thực ô nhập).

Ví dụ dưới đây giới hạn giá trị thành 4-8 ký tự và yêu cầu chúng chỉ chứa chữ thường.

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="45"
      pattern="[a-z]{4,8}" />
    <span class="validity"></span>
    <p>Usernames must be lowercase and 4-8 characters in length.</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
  position: relative;
}

p {
  font-size: 80%;
  color: #999999;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Điều này hiển thị như sau:

Ví dụ

Bạn có thể xem các ví dụ tốt về ô nhập văn bản được dùng trong ngữ cảnh trong các bài viết Biểu mẫu HTML đầu tiên của bạn và Cách cấu trúc biểu mẫu HTML.

Tóm tắt kỹ thuật

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Biểu mẫu HTML
• <input> và giao diện HTMLInputElement nó dựa trên.
• <input type="search">
• <textarea>: Ô nhập văn bản nhiều dòng