Thẻ HTML textarea được sử dụng để tạo trường nhập văn bản có nhiều dòng trong một biểu mẫu. Nó được định nghĩa bằng <textarea> và có thể chứa số lượng ký tự không giới hạn.
Khi tạo biểu mẫu trong HTML, bạn có thể quyết định rằng bạn muốn chấp nhận một chuỗi văn bản dài. Ví dụ:nếu bạn đang tạo biểu mẫu liên hệ với khách hàng cho trang web của nhà bán lẻ, bạn có thể muốn tạo phần tử biểu mẫu chấp nhận mô tả chi tiết về vấn đề mà khách hàng đang gặp phải.
Đó là nơi HTML <textarea> xuất hiện trong thẻ. <textarea> phần tử được sử dụng để tạo phần tử biểu mẫu cung cấp các tính năng chỉnh sửa văn bản nhiều dòng. Phần tử này hữu ích nếu bạn muốn chấp nhận các phản hồi văn bản dài hơn từ người dùng.
Hướng dẫn này sẽ thảo luận, với một vài ví dụ, cách sử dụng HTML <textarea> trong mã của bạn. Đến cuối hướng dẫn này, bạn sẽ có tất cả kiến thức cần thiết để sử dụng <textarea> gắn thẻ như một chuyên gia!
Thẻ HTML Textarea
<textarea> được sử dụng để xác định trường điều khiển nhập văn bản nhiều dòng trong một biểu mẫu. <textarea> thẻ có khả năng chứa số lượng ký tự không giới hạn.
Cú pháp cho <textarea> như sau:
<textarea rows="10" cols="10"> Placeholder contents </textarea>
Hãy chia nhỏ mã của chúng ta. <textarea> được sử dụng để xác định hộp vùng văn bản trong biểu mẫu web của chúng tôi. Không giống như <input> các thẻ, <textarea> thẻ phải có cả thẻ mở (<textarea> ) và thẻ đóng (</textarea> ). Điều này là do văn bản mặc định mà vùng văn bản sẽ hiển thị được chứa giữa hai thẻ.
Chúng tôi cũng đã chỉ định hai thuộc tính trong ví dụ của mình:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
- hàng hướng dẫn trình duyệt về số lượng hàng mà vùng văn bản phải có theo mặc định. Nói cách khác, thuộc tính row chỉ định chiều cao của vùng văn bản.
- cols là số cột mà vùng văn bản phải có theo mặc định. Nói cách khác, thuộc tính cols chỉ định chiều rộng của vùng văn bản.
Giả sử chúng tôi đang xây dựng một biểu mẫu web cho một cửa hàng quần áo địa phương. Biểu mẫu này sẽ cho phép khách hàng đưa ra phản hồi về việc mua hàng của họ. Bởi vì chúng tôi muốn cho người dùng có thể gửi các thông tin phản hồi chi tiết, chúng tôi sẽ sử dụng <textarea> Phần tử HTML để thu thập phản hồi của người dùng.
Chúng tôi có thể sử dụng mã sau để tạo biểu mẫu phản hồi:
<form> <label for="feedback">What feedback do you have for us?</label><br /><br /> <textarea rows="5" cols="30" id="feedback" name="feedback"> Your feedback goes here. </textarea> </form>
Mã của chúng tôi trả về:
Hãy chia nhỏ mã của chúng ta. Đầu tiên, chúng tôi đã khai báo một <form> được sử dụng để xác định biểu mẫu web của chúng tôi. Sau đó, chúng tôi sử dụng <label> để thêm nhãn vào trang của chúng tôi hỏi người dùng What feedback do you have for us?
Sau đó, chúng tôi sử dụng <textarea> để tạo biểu mẫu phản hồi. Chúng tôi đã chỉ định bốn thuộc tính, như sau:
- hàng được đặt thành 5 và lưu trữ số hàng mà trường phải có.
- cols được đặt thành 30 và lưu trữ số cột mà trường phải có.
- id là số nhận dạng duy nhất được chỉ định cho biểu mẫu, sẽ được sử dụng khi chúng tôi gửi biểu mẫu. Tên
- cũng được sử dụng để xác định biểu mẫu và được yêu cầu nếu chúng tôi muốn gửi biểu mẫu tới máy chủ web.
<textarea> được hỗ trợ bởi tất cả các trình duyệt chính.
Ví dụ trên là cách triển khai cơ bản của <textarea> nhưng chúng tôi có thể làm cho biểu mẫu của mình nâng cao hơn.
Các ví dụ về HTML Textarea
Hãy xem qua hai ví dụ nâng cao hơn để minh họa cách chúng ta có thể sử dụng <textarea> để tạo vùng văn bản.
Độ dài Tối thiểu và Tối đa
Hãy quay lại ví dụ về cửa hàng quần áo của chúng tôi. Giả sử chúng tôi muốn giới hạn số ký tự mà người dùng gửi ở mức 1000, để khuyến khích người dùng súc tích khi viết phản hồi của họ. Chúng tôi cũng muốn đặt giới hạn ký tự tối thiểu là 10 để đảm bảo người dùng viết nội dung nào đó trong biểu mẫu.
Đó là nơi sử dụng các thuộc tính minlength và maxlength. Minlength được sử dụng để chỉ định số ký tự tối thiểu mà người dùng phải viết và maxlength được sử dụng để chỉ định số ký tự tối đa mà người dùng có thể viết trong một biểu mẫu.
Dưới đây là một ví dụ về biểu mẫu web của chúng tôi trước đó có đặt thuộc tính minlength và maxlength:
<form> <textarea rows="5" cols="30" id="feedback" name="feedback" minlength="10" maxlength="1000"> Your feedback goes here. </textarea> </form>
Biểu mẫu của chúng tôi trả về:
Không có thay đổi rõ ràng nào đối với biểu mẫu của chúng tôi, nhưng nếu chúng tôi cố gắng gửi biểu mẫu của mình, nội dung của biểu mẫu sẽ bị coi là không hợp lệ nếu người dùng đã viết hơn 1000 ký tự.
Điều quan trọng cần lưu ý là, ngay cả khi người dùng viết ít hơn 10 ký tự trong biểu mẫu của chúng tôi, vùng văn bản vẫn được coi là hợp lệ. Nếu chúng tôi muốn thực thi giới hạn tối thiểu, chúng tôi cần chỉ định required thuộc tính.
Văn bản giữ chỗ
Trong biểu mẫu web ở trên của chúng tôi, chúng tôi chỉ định văn bản mặc định bên trong biểu mẫu của chúng tôi. Văn bản này nêu rõ Your feedback goes here. Mặc dù đây là thông tin hữu ích nhưng người dùng phải xóa văn bản mặc định theo cách thủ công nếu họ không muốn nó trong phản hồi biểu mẫu của họ.
Nếu bạn muốn chỉ định giá trị trình giữ chỗ, bạn có thể sử dụng placeholder thuộc tính. Thuộc tính này cho biết giá trị trình giữ chỗ sẽ hiển thị khi biểu mẫu trống. Ngay sau khi người dùng bắt đầu nhập vào hộp, trình giữ chỗ sẽ biến mất.
Đây là ví dụ về <textarea> trong đó có văn bản giữ chỗ Your feedback goes here. :
<textarea placeholder="Your feedback goes here." rows="5" cols="30"> </textarea>
Mã của chúng tôi trả về:
Như bạn có thể thấy, văn bản Your feedback goes here. xuất hiện trong hộp văn bản. Tuy nhiên, khi người dùng bắt đầu nhập văn bản này sẽ biến mất. Chúng tôi biết rằng văn bản này là một trình giữ chỗ vì nó có màu xám nhạt, trong khi văn bản mặc định, giống như chúng tôi đã chỉ định trong ví dụ đầu tiên của chúng tôi trong bài viết này, xuất hiện trong văn bản hoàn toàn màu đen (trừ khi được chỉ định khác).
Thuộc tính HTML Textarea
<textarea> thẻ chấp nhận một số thuộc tính dành riêng cho thẻ. Ngoài ra, <textarea> thẻ hỗ trợ tất cả các thuộc tính toàn cục trong HTML.
Dưới đây là các thuộc tính dành riêng cho thẻ được hỗ trợ bởi <textarea> thẻ:
| Thuộc tính | Giá trị | Mô tả |
| tự động lấy nét | tự động lấy nét | Cho biết liệu vùng văn bản có nên lấy nét khi tài liệu được tải hay không. |
| cols | số | Chỉ định số dòng văn bản được hiển thị theo mặc định cho vùng văn bản. |
| bị vô hiệu hóa | boolean | Tắt vùng văn bản cho người dùng nhập. |
| biểu mẫu | ID biểu mẫu | Liên kết vùng văn bản với một biểu mẫu. |
| maxlength | số | Chỉ định số ký tự tối đa được chấp nhận bởi vùng văn bản. |
| độ dài tối thiểu | số | Chỉ định số ký tự tối thiểu được chấp nhận bởi vùng văn bản. |
| tên | tên | Gán tên cho vùng văn bản. |
| trình giữ chỗ | văn bản | Cung cấp trình giữ chỗ văn bản sẽ biến mất khi người dùng bắt đầu nhập vào vùng văn bản. |
| chỉ đọc | boolean | Cho biết người dùng không thể sửa đổi nội dung của vùng văn bản. |
| bắt buộc | boolean | Cho biết người dùng phải điền vào biểu mẫu. |
| hàng | số | Chỉ định số lượng cột văn bản được hiển thị theo mặc định cho vùng văn bản. |
Kết luận
HTML <textarea> được sử dụng để tạo các phần tử đầu vào văn bản nhiều dòng. Những điều này có thể hữu ích nếu bạn muốn thu thập chuỗi dữ liệu dài hơn từ người dùng.
Hướng dẫn này đã thảo luận, có tham chiếu đến các ví dụ, cách sử dụng <textarea> để tạo vùng văn bản. Hướng dẫn này cũng cung cấp một bảng tham chiếu với các thuộc tính dành riêng cho thẻ được cung cấp bởi <textarea> nhãn. Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng <textarea> thẻ như một chuyên gia HTML!