Kiểu css vùng văn bản

Thử nó

Ví dụ trên minh họa một số tính năng của

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

• Thuộc tính

  textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  8 để cho phép

  textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  6 được liên kết với phần tử

  textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  0 cho mục đích trợ năng
• Thuộc tính

  textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  1 để đặt tên của điểm dữ liệu được liên kết được gửi tới máy chủ khi biểu mẫu được gửi
• Thuộc tính

  textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  2 và

  textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  3 để cho phép bạn chỉ định kích thước chính xác cho

  textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  6 để lấy. Đặt những thứ này là một ý tưởng hay để đảm bảo tính nhất quán, vì các giá trị mặc định của trình duyệt có thể khác nhau
• Nội dung mặc định được nhập giữa thẻ mở và thẻ đóng.

  textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  6 không hỗ trợ thuộc tính

  textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  6

Phần tử

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Thuộc tính này cho biết giá trị của điều khiển có thể được trình duyệt tự động hoàn thành hay không. giá trị có thể là

• <textarea name="textarea" rows="10" cols="50">Write something heretextarea>
  

  6. Người dùng phải nhập rõ ràng một giá trị vào trường này cho mỗi lần sử dụng hoặc tài liệu cung cấp phương thức tự động hoàn thành của riêng nó;

• <textarea name="textarea" rows="10" cols="50">Write something heretextarea>
  

  7. Trình duyệt có thể tự động hoàn thành giá trị dựa trên các giá trị mà người dùng đã nhập trong các lần sử dụng trước

Nếu thuộc tính

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Chuỗi cho biết có kích hoạt sửa lỗi chính tả tự động và xử lý thay thế văn bản (nếu có được định cấu hình) trong khi người dùng đang chỉnh sửa

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

Bật tính năng tự động sửa lỗi chính tả và thay thế văn bản

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

Tắt tự động sửa lỗi chính tả và thay thế văn bản

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

Thuộc tính Boolean này cho phép bạn chỉ định rằng điều khiển biểu mẫu phải có tiêu điểm đầu vào khi tải trang. Chỉ một phần tử liên kết với biểu mẫu trong tài liệu có thể có thuộc tính này được chỉ định

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Chiều rộng hiển thị của điều khiển văn bản, tính theo chiều rộng ký tự trung bình. Nếu nó được chỉ định, nó phải là một số nguyên dương. Nếu nó không được chỉ định, giá trị mặc định là

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

Thuộc tính Boolean này chỉ ra rằng người dùng không thể tương tác với điều khiển. Nếu thuộc tính này không được chỉ định, điều khiển sẽ kế thừa cài đặt của nó từ phần tử chứa, ví dụ:

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Phần tử biểu mẫu mà phần tử

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Số ký tự tối đa (đơn vị mã UTF-16) mà người dùng có thể nhập. Nếu giá trị này không được chỉ định, người dùng có thể nhập số lượng ký tự không giới hạn

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Số ký tự tối thiểu (đơn vị mã UTF-16) mà người dùng phải nhập

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Tên của điều khiển

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

Một gợi ý cho người dùng về những gì có thể được nhập trong điều khiển. Việc xuống dòng hoặc xuống dòng trong văn bản giữ chỗ phải được coi là ngắt dòng khi hiển thị gợi ý

Note: Placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

Thuộc tính Boolean này chỉ ra rằng người dùng không thể sửa đổi giá trị của điều khiển. Không giống như thuộc tính

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

Thuộc tính này chỉ định rằng người dùng phải điền vào một giá trị trước khi gửi biểu mẫu

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Số lượng dòng văn bản hiển thị cho điều khiển. Nếu nó được chỉ định, nó phải là một số nguyên dương. Nếu nó không được chỉ định, giá trị mặc định là 2

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Chỉ định liệu

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

• textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  65. Cho biết phần tử cần có trình kiểm tra chính tả và ngữ pháp

• textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  66. Cho biết phần tử sẽ hành động theo một hành vi mặc định, có thể dựa trên giá trị

  textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  63 của chính phần tử cha

• textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  68. Cho biết rằng phần tử không nên được kiểm tra chính tả

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Cho biết cách kiểm soát sẽ bao bọc giá trị để gửi biểu mẫu. giá trị có thể là

• textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  60. Trình duyệt tự động chèn ngắt dòng (CR+LF) sao cho mỗi dòng không dài hơn chiều rộng của điều khiển;

• textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  62. Trình duyệt đảm bảo rằng tất cả các ngắt dòng trong giá trị đã nhập là một cặp

  textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  63, nhưng không có ngắt dòng bổ sung nào được thêm vào giá trị

• <textarea name="textarea" rows="10" cols="50">Write something heretextarea>
  

  6 Không chuẩn . Giống như

  textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  62 nhưng thay đổi giao diện thành

  textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  66 để các đoạn dòng vượt quá

  textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  3 không bị ngắt dòng và

  textarea:invalid {
    border: 2px dashed red;
  }
  
  textarea:valid {
    border: 2px solid lime;
  }
  

  6 có thể cuộn theo chiều ngang.

Nếu thuộc tính này không được chỉ định, thì

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Tạo kiểu với CSS

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Tạo kiểu cho các biểu mẫu HTML cung cấp một số mẹo hữu ích về tạo kiểu cho các

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

đường cơ sở không nhất quán

Đặc tả HTML không xác định vị trí của đường cơ sở của

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Kiểm soát xem một vùng văn bản có thể thay đổi kích thước hay không

Trong hầu hết các trình duyệt,

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Tạo kiểu các giá trị hợp lệ và không hợp lệ

Các giá trị hợp lệ và không hợp lệ của phần tử

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

ví dụ

Ví dụ cơ bản

Ví dụ sau đây cho thấy một vùng văn bản rất đơn giản, với số lượng hàng và cột đã đặt và một số nội dung mặc định

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

Ví dụ sử dụng "minlength" và "maxlength"

Ví dụ này có số ký tự tối thiểu và tối đa — lần lượt là 10 và 20. Hãy thử nó và xem

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Lưu ý rằng

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

Ví dụ sử dụng "giữ chỗ"

Ví dụ này có một bộ giữ chỗ. Lưu ý cách nó biến mất khi bạn bắt đầu nhập vào hộp

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Note: Placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Đã tắt và chỉ đọc

Ví dụ này hiển thị hai

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

Ghi chú. Trong các trình duyệt khác ngoài Firefox, chẳng hạn như chrome, nội dung vùng văn bản

<textarea name="textarea" rows="10" cols="50">Write something heretextarea>

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Tóm tắt kỹ thuật

Danh mục nội dung Nội dung luồng, nội dung cụm từ, Nội dung tương tác, phần tử liên kết với biểu mẫu được liệt kê, có thể gắn nhãn, có thể đặt lại và có thể gửi. Nội dung được phép Bỏ sót thẻ văn bảnKhông có, cả thẻ bắt đầu và thẻ kết thúc đều bắt buộc. Cha mẹ được phépBất kỳ phần tử nào chấp nhận nội dung cụm từ. Vai trò ARIA ngầm định

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}