<textarea>: 文字區域元素

上面的例子展示了<textarea> 的一些功能

• id 屬性，用於使 <textarea> 與 <label> 元素相關聯，以實現無障礙訪問
• 當表單提交時，name 屬性用於設定提交到伺服器的關聯資料點的名稱。
• rows 和 cols 屬性允許您為 <textarea> 指定確切的大小。設定這些屬性對於一致性來說是一個好主意，因為瀏覽器預設值可能會有所不同。
• 在開始和結束標籤之間輸入的預設內容。<textarea> 不支援 value 屬性。

<textarea> 元素還接受表單 <input> 中的幾個常用屬性，例如 autocapitalize、autocomplete、autofocus、disabled、placeholder、readonly 和 required。

此元素包含 全域性屬性。

autocapitalize

控制是否自動將輸入的文字大寫，以及如果自動大寫，則以何種方式大寫。有關更多資訊，請參閱 autocapitalize 全域性屬性頁面。

autocomplete

此屬性指示瀏覽器是否可以自動完成控制元件的值。可能的值是

• off：使用者必須在每次使用時明確地將值輸入此欄位，或者文件提供自己的自動完成方法；瀏覽器不會自動完成輸入。
• on：瀏覽器可以根據使用者在以前使用時輸入的值自動完成值。

如果在 <textarea> 元素上未指定 autocomplete 屬性，則瀏覽器使用 <textarea> 元素的表單所有者的 autocomplete 屬性值。表單所有者是此 <textarea> 元素的後代的 <form> 元素，或者其 id 由輸入元素的 form 屬性指定的表單元素。有關更多資訊，請參閱 autocomplete 屬性在 <form> 中的說明。

autocorrect 非標準

一個字串，指示是否在使用者編輯此 textarea 時啟用自動拼寫校正和文字替換的處理（如果有配置）。允許的值是

on

啟用自動拼寫校正和文字替換。

off

停用自動拼寫校正和文字替換。

autofocus

此布林屬性允許您指定表單控制元件在頁面載入時應具有輸入焦點。在文件中，只有一個與表單關聯的元素可以指定此屬性。

cols

文字控制元件的可見寬度，以平均字元寬度為單位。如果指定了它，它必須是正整數。如果未指定，預設值為 20。

dirname

此屬性用於指示元素內容的文字方向。有關更多資訊，請參閱 dirname 屬性。

disabled

此布林屬性指示使用者無法與控制元件互動。如果未指定此屬性，控制元件將從包含元素繼承其設定，例如 <fieldset>；如果在設定 disabled 屬性時沒有包含元素，則控制元件將被啟用。

form

與 <textarea> 元素關聯的表單元素（其“表單所有者”）。該屬性的值必須是同一文件中表單元素的 id。如果未指定此屬性，則 <textarea> 元素必須是表單元素的後代。此屬性允許您將 <textarea> 元素放置在文件中的任何位置，而不僅僅是作為表單元素的後代。

maxlength

使用者可以輸入的最大字串長度（以 UTF-16 程式碼單元為單位）。如果未指定此值，使用者可以輸入無限個字元。

minlength

使用者應輸入的最小字串長度（以 UTF-16 程式碼單元為單位）。

name

控制元件的名稱。

placeholder

一個提示使用者在控制元件中可以輸入什麼的提示。佔位符文字中的回車符或換行符在渲染提示時必須被視為換行符。

注意：佔位符僅用於顯示應在表單中輸入的資料型別的示例；它們不是與輸入繫結的正確 <label> 元素的替代品。有關完整說明，請參閱 <input> 標籤。

readonly

此布林屬性指示使用者無法修改控制元件的值。與 disabled 屬性不同，readonly 屬性不會阻止使用者單擊或選擇控制元件中的內容。只讀控制元件的值仍將與表單一起提交。

required

此屬性指定使用者必須在提交表單之前填寫一個值。

rows

控制元件的可見文字行數。如果指定了它，它必須是正整數。如果未指定，預設值為 2。

spellcheck

指定 <textarea> 是否受底層瀏覽器/作業系統拼寫檢查的影響。該值可以是

• true：表示需要檢查元素的拼寫和語法。
• default：表示該元素應根據預設行為進行操作，可能基於父元素自己的 spellcheck 值。
• false：表示該元素不應進行拼寫檢查。

wrap

指示控制元件應如何包裝表單提交的值。可能的值是

• hard：瀏覽器會自動插入換行符 (CR+LF)，以便每行的長度不超過控制元件的寬度；必須指定 cols 屬性才能使此生效
• soft：瀏覽器確保輸入值中的所有換行符都是一個 CR+LF 對，但不會在值中新增額外的換行符。
• off 非標準 ：與 soft 相似，但將外觀更改為 white-space: pre，因此超過 cols 的行段不會換行，並且 <textarea> 變得可水平滾動。

如果未指定此屬性，則 soft 是其預設值。

<textarea> 是一個 替換元素 - 它具有固有尺寸，就像光柵影像一樣。預設情況下，其 display 值為 inline-block。與其他表單元素相比，它相對容易設定樣式，其框模型、字型、配色方案等可以使用常規 CSS 輕鬆操作。

設定 HTML 表單的樣式 提供了一些關於設定 <textarea> 樣式的有用技巧。

HTML 規範沒有定義 <textarea> 的基線位置，因此不同的瀏覽器將其設定為不同的位置。對於 Gecko，<textarea> 基線設定為 textarea 的第一行的基線，在另一個瀏覽器中，它可能設定為 <textarea> 框的底部。不要在它上面使用 vertical-align: baseline；行為不可預測。

在大多數瀏覽器中，<textarea> 是可調整大小的 - 您會在右下角看到一個拖動控制代碼，可以使用它來更改頁面上元素的大小。這由 resize CSS 屬性控制 - 預設情況下啟用調整大小，但您可以使用 none 的 resize 值顯式停用它

textarea {
  resize: none;
}

可以使用 :valid 和 :invalid 偽類突出顯示 <textarea> 元素的有效值和無效值（例如，那些在 minlength、maxlength 或 required 設定的邊界內和邊界外的值）。例如，要根據文字區域是否有效或無效為其提供不同的邊框

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

以下示例顯示了一個文字區域，它具有設定的行數和列數、一些預設內容以及 CSS 樣式，這些樣式阻止使用者將元素的大小調整到超過 500px 寬和 130px 高。

<textarea name="textarea" rows="5" cols="15">Write something here</textarea>

textarea {
  max-height: 130px;
  max-width: 500px;
}

結果

此示例具有最小字元數和最大字元數 - 分別為 10 和 20。嘗試一下，看看結果。

<textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20">
Write something here…
</textarea>

textarea {
  max-height: 130px;
  max-width: 500px;
}

結果

請注意，minlength 不會阻止使用者刪除字元，因此輸入的數字超過了最小值，但它確實使輸入到 <textarea> 中的值無效。還要注意，即使設定了 minlength 值（例如 3），除非還設定了 required 屬性，否則空 <textarea> 仍然被視為有效。

此示例設定了一個佔位符。請注意，當您開始在框中輸入內容時，它會消失。

<textarea
  name="textarea"
  rows="5"
  cols="30"
  placeholder="Comment text."></textarea>

textarea {
  max-height: 130px;
  max-width: 500px;
}

結果

此示例顯示了兩個 <textarea> - 一個是 readonly，一個是 disabled。您無法編輯任何元素的內容，但 readonly 元素是可聚焦的，並且其值在表單中提交。disabled 元素的值不會提交，並且不可聚焦。

<textarea name="textarea" rows="5" cols="30" readonly>
I am a read-only textarea.
</textarea>
<textarea name="textarea" rows="5" cols="30" disabled>
I am a disabled textarea.
</textarea>

textarea {
  display: block;
  resize: horizontal;
  max-width: 500px;
}

結果

• 其他與表單相關的元素
  • <form>
  • <button>
  • <datalist>
  • <legend>
  • <label>
  • <select>
  • <optgroup>
  • <option>
  • <input>
  • <fieldset>
  • <output>
  • <progress>
  • <meter>