Làm cách nào để giới hạn kích thước của hộp nhập liệu?

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

  
    Choose a username: 
    
  
  
    Submit
  

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

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

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

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

Đầ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

  
    Choose a username: 
    
  
  
    Submit
  

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

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

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

  
    Choose a username: 
    
  
  
    Submit
  

Thuộc tính

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 để chỉ định văn bản mà hầu hết các trình duyệt sẽ hiển thị dưới dạng chú giải công cụ để giải thích những yêu cầu để khớp với mẫu. Bạn cũng nên bao gồm văn bản giải thích khác gần đó

Xem để biết thêm chi tiết và một ví dụ

Thuộc tính

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

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,

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

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

Thuộc tính

  
    Choose a username: 
    
  
  
    Submit
  

Đ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

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

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

  
    Choose a username: 
    
  
  
    Submit
  

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

  
    Choose a username: 
    
  
  
    Submit
  

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

  
    Choose a username: 
    
  
  
    Submit
  

Một trường nhập liệu có thể được bật kiểm tra chính tả nếu nó không có thuộc tính được đặt và không bị tắt

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

  
    Choose a username: 
    
  
  
    Submit
  

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

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

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

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

  
    Choose a username: 
    
  
  
    Submit
  

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

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. sử dụng thuộc tính toàn cầu thay thế

Các phần tử

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

Đ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à

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

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. Nhìn vào ví dụ sau

  
    Choose a username: 
    
  
  
    Submit
  

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

  
    Choose a username: 
    
  
  
    Submit
  

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. Với nó, bạn có thể chỉ định số lượng ký tự mà kiểu nhập văn bản có thể hiển thị tại một thời điểm. Đ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 ký tự thay vì pixel. Ví dụ, trong ví dụ này, đầu vào rộng 30 ký tự

Các phần tử

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

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

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à

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

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

  
    Choose a username: 
    
  
  
    Submit
  

Bạn có thể sử dụng thuộc tính như một cách dễ dàng để nhập giá trị bắt buộc trước khi cho phép gửi biểu mẫu

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

Đ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

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;

Ví dụ bên dưới yêu cầu giá trị đã nhập có độ dài từ 4–8 ký tự

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

Đ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

  
    Choose a username: 
    
  
  
    Submit
  

Bạn có thể sử dụng thuộc tính để chỉ định một biểu thức chính quy mà giá trị đã nhập phải khớp để được coi là hợp lệ [xem khóa học cấp tốc đơn giản về cách sử dụng biểu thức chính quy để xác thực đầu vào]

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

  
    Choose a username: 
    
  
  
    Submit
  

  
    Choose a username: 
    
  
  
    Submit
  

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

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

Thuộc tính nào được sử dụng để giới hạn đầu vào trong hộp văn bản?

Mục đích của độ dài giới hạn của đầu vào là gì?