Phần tử HTML
textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
6 đại diện cho một điều khiển chỉnh sửa văn bản thuần túy nhiều dòng, hữu ích khi bạn muốn cho phép người dùng nhập một lượng lớn văn bản dạng tự do, ví dụ: nhận xét về biểu mẫu đánh giá hoặc phản hồiThử 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;
}
6- Thuộc tính
8 để cho phéptextarea: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ăngtextarea:invalid { border: 2px dashed red; } textarea:valid { border: 2px solid lime; }
- Thuộc tính
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ửitextarea:invalid { border: 2px dashed red; } textarea:valid { border: 2px solid lime; }
- Thuộc tính
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 chotextarea: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 nhautextarea:invalid { border: 2px dashed red; } textarea:valid { border: 2px solid lime; }
- Nội dung mặc định được nhập giữa thẻ mở và thẻ đóng.
6 không hỗ trợ thuộc tínhtextarea:invalid { border: 2px dashed red; } textarea:valid { border: 2px solid lime; }
6textarea:invalid { border: 2px dashed red; } textarea:valid { border: 2px solid lime; }
Phần tử
textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
6 cũng chấp nhận một số thuộc tính phổ biến để tạo thành các textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
8, chẳng hạn như textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
9, Write something here
0, Write something here
1, Write something here
2, Write something here
3 và Write something here
4Thuộ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;
}
9Thuộ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à
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ó;Write something here
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ướcWrite something here
Nếu thuộc tính
textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
9 không được chỉ định trên phần tử textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
6, thì trình duyệt sẽ sử dụng giá trị thuộc tính textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
9 của chủ sở hữu biểu mẫu của phần tử textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
6. Chủ sở hữu biểu mẫu là phần tử textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
72 mà phần tử textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
6 này là hậu duệ của phần tử biểu mẫu có textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
8 được chỉ định bởi thuộc tính textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
75 của phần tử đầu vào. Để biết thêm thông tin, hãy xem thuộc tính textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
9 trong textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
72textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
78 Không chuẩnChuỗ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;
}
79 này. giá trị được phép làWrite something here
7Bật tính năng tự động sửa lỗi chính tả và thay thế văn bản
Write something here
6Tắt tự động sửa lỗi chính tả và thay thế văn bản
Write something here
0Thuộ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;
}
3Chiề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;
}
74Write something here
1Thuộ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;
}
76; textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
75Phần tử biểu mẫu mà phần tử
textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
6 được liên kết với ["chủ sở hữu biểu mẫu"]. Giá trị của thuộc tính phải là textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
8 của thành phần biểu mẫu trong cùng một tài liệu. Nếu thuộc tính này không được chỉ định, phần tử textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
6 phải là phần tử con của phần tử biểu mẫu. Thuộc tính này cho phép bạn đặt các phần tử textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
6 ở bất kỳ đâu trong tài liệu, không chỉ là phần tử con của các phần tử biểu mẫutextarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
23Số 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;
}
24Số 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;
}
1Tên của điều khiển
Write something here
2Mộ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;
}
0 element tied to the input. See Labels and placeholders in : The Input [Form Input] element for a full explanation.Write something here
3Thuộ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
Write something here
1, thuộc tính Write something here
3 không ngăn người dùng nhấp hoặc chọn trong điều khiển. Giá trị của điều khiển chỉ đọc vẫn được gửi cùng với biểu mẫuWrite something here
4Thuộ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;
}
2Số 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;
}
63Chỉ định liệu
textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
6 có thể được kiểm tra chính tả bởi trình duyệt/OS cơ bản hay không. Giá trị có thể là
65. Cho biết phần tử cần có trình kiểm tra chính tả và ngữ pháptextarea: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ử chatextarea: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; }
textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
69Cho 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à
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ặptextarea: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:invalid { border: 2px dashed red; } textarea:valid { border: 2px solid lime; }
6 Không chuẩn . Giống nhưWrite something here
62 nhưng thay đổi giao diện thànhtextarea: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.textarea:invalid { border: 2px dashed red; } textarea:valid { border: 2px solid lime; }
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;
}
62 là giá trị mặc định của nóTạo kiểu với CSS
textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
6 là phần tử được thay thế — nó có kích thước bên trong, giống như hình ảnh raster. Theo mặc định, giá trị textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
81 của nó là textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
82. So với các phần tử biểu mẫu khác, nó tương đối dễ tạo kiểu, với mô hình hộp, phông chữ, cách phối màu, v.v. dễ dàng thao tác bằng CSS thông thườngTạ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;
}
6đườ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;
}
6, vì vậy các trình duyệt khác nhau sẽ đặt nó ở các vị trí khác nhau. Đối với Gecko, đường cơ sở của textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
6 được đặt trên đường cơ sở của dòng đầu tiên của vùng văn bản, trên một trình duyệt khác, nó có thể được đặt ở dưới cùng của hộp textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
6. Không sử dụng textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
87textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
88 trên đó; 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;
}
6 có thể thay đổi kích thước — bạn sẽ nhận thấy thanh kéo ở góc bên phải, có thể được sử dụng để thay đổi kích thước của phần tử trên trang. Điều này được kiểm soát bởi thuộc tính CSS textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
60 — thay đổi kích thước được bật theo mặc định, nhưng bạn có thể vô hiệu hóa nó một cách rõ ràng bằng cách sử dụng giá trị textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
60 của textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
62textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
5Tạ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;
}
6 [e. g. những thứ bên trong và bên ngoài giới hạn được đặt bởi textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
24, textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
23 hoặc Write something here
4] có thể được đánh dấu bằng cách sử dụng các lớp giả textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
67 và textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
68. Ví dụ: để cung cấp cho vùng văn bản của bạn một đường viền khác tùy thuộc vào việc nó hợp lệ hay không hợp lệ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
Write something here
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;
}
7Lưu ý rằng
textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
24 không ngăn người dùng xóa các ký tự để số đã nhập vượt quá mức tối thiểu, nhưng nó làm cho giá trị được nhập vào textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
6 không hợp lệ. Cũng lưu ý rằng ngay cả khi bạn có bộ giá trị textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
24 [ví dụ: 3], thì một giá trị textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
6 trống vẫn được coi là hợp lệ trừ khi bạn cũng có bộ thuộc tính Write something here
4Ví 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;
}
7Note: 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;
}
0 element tied to the input. See Labels and placeholders in : The Input [Form Input] element for a full explanation.Đã 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;
}
6 — một trong số đó là Write something here
1 và một trong số đó là Write something here
3. Hãy chơi với cả hai và bạn sẽ thấy sự khác biệt trong hành vi — phần tử Write something here
1 không thể chọn theo bất kỳ cách nào [và giá trị của nó không được gửi], trong khi phần tử Write something here
3 có thể chọn và nội dung của nó có thể sao chép được [và giá trị của nó được gửi] 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
Write something here
1 có thể được chọn và sao chép đượctextarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
2Tó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;
}
11Các vai trò ARIA được phépKhông có textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
12được phépGiao diện DOM____013