HTML - <textarea> 標籤

HTML <textarea> 標籤用於表示多行純文字編輯控制元件。當您希望允許使用者輸入大量自由格式文字時，它非常有用。<textarea> 標籤的最佳示例是在評論、反饋表單和故事內容中編寫評論。

以下是建立 <textarea> 標籤時自動新增的預設屬性：

id: 它允許 <textarea> 標籤與標籤元素關聯，以實現可訪問性目的。
name: 當提交表單時，它用於設定提交到伺服器的關聯資料點的名稱。
rows & cols: HTML 行和列屬性指定 <textarea> 的確切大小。

語法

<textarea>
  ....
</textarea>

屬性

HTML 文字區域標籤支援 HTML 的全域性和事件屬性。以及一些特定的屬性，如下所示。

屬性	值	描述
autofocus	autofocus	指定在頁面載入時文字區域應自動獲得焦點。
cols	數字	根據可見字元寬度的數量指定文字區域的寬度。
dirname	textareaname.dir	指定將提交文字區域的文字方向。
disabled	disabled	根據可見字元寬度的數量指定文字區域的寬度。
form	form_id	指定一個或多個表單。
maxlength	數字	指定文字區域中字元的最大數量。
name	name	為輸入控制元件分配名稱。
placeholder	文字	指定文字區域中值的簡短提示。
readonly	readonly	將輸入控制元件設定為只讀。它不允許使用者更改值。但是，控制元件可以接收焦點，並且在透過表單控制元件進行製表時會包含在內。
required	required	指定文字區域是必需的。
rows	數字	根據可見文字行的數量指定文字區域的高度。如果文字超出此限制，使用者可以使用文字區域的捲軸進行滾動。
wrap	hard soft	指定在文字區域中換行文字。

HTML 文字區域標籤示例

下面的示例將說明文字區域標籤的用法。在哪裡、何時以及如何使用它來建立文字區域，以及我們如何使用 CSS 樣式化該文字區域部分。

建立文字區域元素

在以下程式中，我們使用 <textarea> 標籤在 HTML 中建立一個不包含任何屬性的文字區域欄位。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Textarea Tag</title>
</head>
<body>
   <!--create a textarea element(tag)-->
   <textarea></textarea>
</body>
</html>

建立具有屬性的文字區域元素

以下是 HTML <textarea> 標籤的另一個示例。在這裡，我們使用包含預設屬性（名稱、ID、行和列）的 <textarea> 標籤建立一個文字區域元素。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Textarea Tag</title>
</head>
<body>
   <!--create a textarea element(tag)-->
   <textarea name="feedback" id="demo" 
             cols="30" rows="10">
   </textarea>
</body>
</html>

樣式化文字區域

在此示例中，我們使用 HTML <textarea> 標籤建立一個文字區域元素。然後，使用 CSS 對其進行樣式化，並使用佔位符屬性指定文字區域中值的簡短提示。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Textarea Tag</title>
   <style>
      textarea {
         width: 300px;
         height: 120px;
         background-color: aquamarine;
         padding: 10px 10px;
         font-size: 18px;
         color: white;
      }
   </style>
</head>
<body>
   <!--create a textarea element(tag)-->
   <h3>Write your feedback: </h3>
   <textarea placeholder="Write your feedback...."></textarea>
</body>
</html>

文字區域的字元限制

考慮以下示例，我們將使用 min 和 max 屬性。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Textarea Tag</title>
   <style>
      textarea {
         width: 350px;
         height: 120px;
         background-color: rgb(222, 216, 216);
         font-size: 18px;
         padding: 10px 10px;
      }
   </style>
</head>
<body>
   <!--create a textarea element(tag)-->
   <p>
      Write your review minimum of 10 characters
      and a maximum of 20 characters: 
   </p>
   <textarea placeholder="Write your review..." 
             minlength="10" maxlength="20">
   </textarea>
</body>
</html>

停用文字區域

讓我們看看下面的例子，我們將使用 disabled 屬性。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Textarea Tag</title>
   <style>
      textarea {
         width: 300px;
         height: 100px;
         background-color: rgb(22, 208, 236);
         font-size: 18px;
         padding: 5px 5px;
         color: white;
      }
   </style>
</head>
<body>
   <!--create a textarea element(tag)-->
   <p>Your short story here: </p>
   <textarea placeholder="Your story..." name='story' disabled>
   </textarea>
</body>
</html>

支援的瀏覽器

標籤
textarea	是	是	是	是	是

html_tags_reference.htm

列印頁面