在 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>
要設定您自己選擇的文字區域的寬度和高度,您可以指定所需的行數和列數。為此,我們可以利用
<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 屬性可以指定文字區域的寬度,這意味著我們可以輸入最大列數,但是如果我們使用cols 和maxlength 屬性一起放在