資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 表單中的文字區域限制輸入字元數？
在 HTML 中，我們可以建立表單來接受和儲存使用者輸入的資訊，藉助各種元素。這些元素也稱為表單元素，例如：文字欄位（文字框）、單選按鈕、複選框、下拉列表或組合框、重置和提交按鈕。
TextArea 是可以在表單中建立的元素之一。文字區域用作多行控制元件，使用者可以在其中輸入多行多列的資料。
TextArea 控制元件用於輸入備註、建議、地址資訊、電子郵件正文、評論等目的，其中文字大小大於普通文字欄位，因為文字欄位是單行輸入控制元件，只能在一行中輸入資料。
示例
讓我們瞭解建立預設寬度和高度的文字區域的基本 HTML 程式碼。
<html> <head><title>Feedback Form..</title> <style> h1{font-family:Algerian;font-size:20;color:blue;text-align:center} </style> </head> <body> <h1>Feedback Form..</h1> <form id="feedback_form"> <label for="label1">Enter your feedback here:</label> <textarea id="t1"> </textarea> </form> </body> </html>
示例
要設定您自己選擇的文字區域的寬度和高度，您可以指定所需的行數和列數。為此，我們可以使用 <textarea> 標記的 rows 和 cols 屬性。以下是程式碼及其輸出。
<html> <head><title>Feedback Form..</title> <style> h1{font-family:Algerian;font-size:20;color:blue;text-align:center} </style> </head> <body> <h1>Feedback Form..</h1> <form id="feedback_form"> <table> <tr> <td> <label for="label1">Enter your feedback:</label> </td> <td> <textarea id="t1" rows="10" cols="24">Type your valueable feedback here: </textarea> </td> </tr> </table> </form> </body> </html>
當文字區域中輸入的資訊超過其高度時，垂直捲軸會自動啟用。
注意 - 預設情況下，我們可以在文字區域中輸入最多 5,24,288 個字元。
在某些情況下，需要限制可以在文字區域中鍵入的字元大小。因此，在這種情況下，我們可以使用maxlength 屬性來控制在文字區域中輸入的字元數。
示例
假設，在使用者鍵入其經驗或文章或演講的網站上，必須對字元數進行限制。因此，網頁設計師可以使用maxlength 屬性來限制文字區域中鍵入的字元數。讓我們透過一個示例來了解一下 -
<html> <body> <form id="feedback_form"> <label for="label1">Enter your feedback (150 words):</label> <textarea id="t1" maxlength="150"> </textarea> </form> </body> </html>
在此程式中，字元數限制設定為僅 150 個字元，這意味著它將在我們不允許超出“150”個字元時停止鍵入。
我們上面已經討論過，cols 屬性可以指定文字區域的寬度，這意味著我們可以最多鍵入到列數，但是如果我們在 <textarea> 標記中一起使用cols 和maxlength 屬性，則 cols 屬性只會設定文字區域的寬度，並且它將無法限制字元數，而 maxlength 屬性將被應用，並設定限制。
示例
您可以嘗試此程式碼 -
<html> <body> <form id="feedback_form"> <label for="label1">Enter your feedback (150 words):</label> <textarea id="t1" cols="20" rows="10" maxlength="5"> </textarea> </form> </body> </html>
此屬性在限制文字區域中的資料大小方面非常有用，並且受所有瀏覽器支援。
15K+ 閱讀量
