Hộp văn bản trong html là gì?

thuộc tính bổ sung

Ngoài các thuộc tính hoạt động trên tất cả các phần tử

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

Choose a username:

Submit

6

Các giá trị của thuộc tính danh sách là

<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>Submitbutton>
  div>
form>

<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>Submitbutton>
  div>
form>

<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>Submitbutton>
  div>
form>

<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>Submitbutton>
  div>
form>

Choose a username:

Submit

7

Số ký tự tối đa (dưới dạng đơn vị mã UTF-16) mà người dùng có thể nhập vào đầu vào

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

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

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

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

Đầu vào sẽ không xác thực được ràng buộc nếu độ dài của giá trị văn bản của trường lớn hơn

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

Choose a username:

Submit

8

Số ký tự tối thiểu (dưới dạng đơn vị mã UTF-16) mà người dùng có thể nhập vào đầu vào

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

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

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

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

Dữ liệu nhập vào sẽ không xác thực được ràng buộc nếu độ dài của văn bản được nhập vào trường này nhỏ hơn

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

Choose a username:

Submit

9

Thuộc tính

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

<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>Submitbutton>
  div>
form>

<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>Submitbutton>
  div>
form>

Nếu mẫu đã chỉ định không được chỉ định hoặc không hợp lệ, thì 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

Ghi chú. Sử dụng thuộc tính

<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>Submitbutton>
  div>
form>

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

Choose a username:

Submit

0

Thuộc tính

<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>Submitbutton>
  div>
form>

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ị trình giữ chỗ theo hướng ngược lại, bạn có thể sử dụng các ký tự định dạng thuật toán hai chiều Unicode để ghi đè hướng trong trình giữ chỗ;

Note: Avoid using the

<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>Submitbutton>
  div>
form>

Choose a username:

Submit

1

Thuộc tính Boolean, nếu có, nghĩa là người dùng không thể chỉnh sửa trường này. Tuy nhiên,

<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>Submitbutton>
  div>
form>

<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>Submitbutton>
  div>
form>

<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>Submitbutton>
  div>
form>

Ghi chú. Vì trường chỉ đọc không thể có giá trị, nên

<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>Submitbutton>
  div>
form>

<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>Submitbutton>
  div>
form>

Choose a username:

Submit

3

Thuộc tính

<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>Submitbutton>
  div>
form>

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

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

Choose a username:

Submit

21

<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>Submitbutton>
  div>
form>

<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>Submitbutton>
  div>
form>

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

<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>Submitbutton>
  div>
form>

<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>Submitbutton>
  div>
form>

Vô hiệu hóa kiểm tra chính tả cho phần tử này

<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>Submitbutton>
  div>
form>

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

<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>Submitbutton>
  div>
form>

Thực hiện theo hành vi mặc định của phần tử để kiểm tra chính tả. Điều này có thể dựa trên bối cảnh

<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>Submitbutton>
  div>
form>

Trường đầu vào có thể được bật kiểm tra chính tả nếu nó không có thuộc tính chỉ đọc được đặt và không bị tắt

Giá trị được trả về bằng cách đọc

<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>Submitbutton>
  div>
form>

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

Các thuộc tính không chuẩn sau đây cũng có sẵn trên một số trình duyệt. Theo nguyên tắc chung, bạn nên tránh sử dụng chúng trừ khi không thể giúp được

Choose a username:

Submit

01

Một tiện ích mở rộng của Safari, thuộc tính

<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>Submitbutton>
  div>
form>

<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>Submitbutton>
  div>
form>

Cho phép tự động sửa lỗi chính tả, cũng như xử lý thay thế văn bản nếu có được định cấu hình

<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>Submitbutton>
  div>
form>

Vô hiệu hóa tự động sửa và thay thế văn bản

Choose a username:

Submit

05

Tiện ích mở rộng của Mozilla, cung cấp gợi ý về loại hành động nào sẽ được thực hiện nếu người dùng nhấn phím Enter hoặc Return trong khi chỉnh sửa trường

Thuộc tính này đã không được dùng nữa. thay vào đó hãy sử dụng thuộc tính toàn cầu

<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>Submitbutton>
  div>
form>

Sử dụng kiểu nhập văn bản

Các phần tử

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

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

Ví dụ cơ bản

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

Điều này ám chỉ như vậy

Khi được gửi, cặp tên/giá trị dữ liệu được gửi đến máy chủ sẽ là

<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>Submitbutton>
  div>
form>

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

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

Đặt trình giữ chỗ

Bạn có thể cung cấp một trình giữ chỗ hữu ích bên trong kiểu nhập văn bản của mình để có thể cung cấp gợi ý về nội dung cần nhập bằng cách bao gồm sử dụng thuộc tính

<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>Submitbutton>
  div>
form>

<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>Submitbutton>
  div>
form>

Bạn có thể xem cách trình giữ chỗ được hiển thị bên dưới

Trình giữ chỗ thường được hiển thị bằng màu sáng hơn màu nền trước 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

<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>Submitbutton>
  div>
form>

Kích thước phần tử đầu vào vật lý

Kích thước vật lý của hộp nhập liệu có thể được kiểm soát bằng thuộc tính

<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>Submitbutton>
  div>
form>

<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>Submitbutton>
  div>
form>

Thẩm định

Các phần tử

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

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

Ghi chú. Xác thực biểu mẫu HTML không thay thế cho tập lệnh máy chủ đảm bảo dữ liệu đã nhập ở định dạng phù hợp. Quá dễ dàng để ai đó thực hiện các điều chỉnh đối với HTML cho phép họ bỏ qua xác thực hoặc xóa hoàn toàn. Cũng có thể ai đó bỏ qua HTML của bạn hoàn toàn và gửi dữ liệu trực tiếp đến máy chủ của bạn. Nếu mã phía máy chủ của bạn không xác thực được dữ liệu mà nó nhận được, thảm họa có thể xảy ra khi dữ liệu được định dạng không đúng (hoặc dữ liệu quá lớn, không đúng loại, v.v.) được nhập vào cơ sở dữ liệu của bạn

Một lưu ý về phong cách

Có các lớp giả hữu ích có sẵn để 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 chúng hợp lệ hoặc không hợp lệ. Đây là

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

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

<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>Submitbutton>
  div>
form>

Kỹ thuật này cũng yêu cầu một phần tử

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

Yêu cầu đầu vào

Bạn có thể sử dụng thuộc tính

<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>Submitbutton>
  div>
form>

<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>Submitbutton>
  div>
form>

<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>Submitbutton>
  div>
form>

Điều này ám chỉ như vậy

Nếu bạn cố gắng gửi biểu mẫu mà không nhập cụm từ tìm kiếm vào đó, trình duyệt sẽ hiển thị thông báo lỗi

Độ dài giá trị đầu vào

Bạn có thể chỉ định độ dài tối thiểu (bằng ký tự) cho giá trị đã nhập bằng thuộc tính

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

Ví dụ bên dưới yêu cầu giá trị đã nhập có độ dài từ 4–8 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>Submitbutton>
  div>
form>

<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>Submitbutton>
  div>
form>

Điều này ám chỉ như vậy

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

Ghi chú. Nếu bạn chỉ định một

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

<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>Submitbutton>
  div>
form>

Chỉ định một mẫu

Bạn có thể sử dụng thuộc tính

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

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

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

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

Điều này ám chỉ như vậy

ví dụ

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

một hộp văn bản là gì?

hộp văn bản với ví dụ là gì?

Câu trả lời hộp văn bản là gì?