<textarea>: The Textarea element

上面的例子展示了 <textarea> 的一些特性：

¥The above example demonstrates a number of features of <textarea>:

• id 属性允许 <textarea> 与 <label> 元素关联以实现可访问性
• name 属性用于设置提交表单时提交到服务器的关联数据点的名称。
• rows 和 cols 属性允许你指定 <textarea> 所采用的精确大小。设置这些是保持一致性的好主意，因为浏览器默认值可能有所不同。
• 在开始和结束标记之间输入的默认内容。<textarea> 不支持 value 属性。

<textarea> 元素还接受形成 <input> 所共有的几个属性，例如 autocapitalize、autocomplete、autofocus、disabled、placeholder、readonly 和 required。

¥The <textarea> element also accepts several attributes common to form <input>s, such as autocapitalize, autocomplete, autofocus, disabled, placeholder, readonly, and required.

¥Attributes

该元素包括 全局属性。

¥This element includes the global attributes.

autocapitalize

控制输入的文本是否自动大写，如果是，则以何种方式自动大写。有关详细信息，请参阅 autocapitalize 全局属性页面。

autocomplete

该属性表示控件的值是否可以由浏览器自动补全。可能的值为：

• off：用户每次使用时都必须在此字段中显式输入一个值，或者文档提供自己的自动补齐方法；浏览器不会自动补齐输入。
• on：浏览器可以根据用户之前使用时输入的值自动补齐该值。

如果未在 <textarea> 元素上指定 autocomplete 属性，则浏览器将使用 <textarea> 元素的表单所有者的 autocomplete 属性值。表单所有者是该 <textarea> 元素为其后代的 <form> 元素，或者是其 id 由输入元素的 form 属性指定的表单元素。有关详细信息，请参阅 <form> 中的 autocomplete 属性。

autocorrect Non-standard

一个字符串，指示在用户编辑此 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> 标签。

¥Note: Placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input. See <input> labels for a full explanation.

readonly

该布尔属性指示用户不能修改控件的值。与 disabled 属性不同，readonly 属性不会阻止用户在控件中单击或选择。只读控件的值仍随表单一起提交。

required

该属性指定用户在提交表单之前必须填写一个值。

rows

控件的可见文本行数。如果指定，则必须是正整数。如果没有指定，则默认值为 2。

spellcheck

指定 <textarea> 是否接受底层浏览器/操作系统的拼写检查。该值可以是：

• true：指示该元素需要检查其拼写和语法。
• default ：指示元素将按照默认行为进行操作，可能基于父元素自己的 spellcheck 值。
• false ：指示不应对该元素进行拼写检查。

wrap

指示控件应如何封装表单提交的值。可能的值为：

• hard：浏览器自动插入换行符（CR+LF），使每行长度不超过控件的宽度；必须指定 cols 属性才能生效
• soft：浏览器确保输入值中的所有换行符都是 CR+LF 对，但不会向该值添加其他换行符。
• off Non-standard :与 soft 类似，但外观更改为 white-space: pre，因此超过 cols 的线段不会换行，并且 <textarea> 变得可水平滚动。

如果未指定该属性，则 soft 为其默认值。

¥Styling with CSS

<textarea> 是 被替换的元素 — 它具有内在尺寸，就像光栅图片一样。默认情况下，其 display 值为 inline-block。与其他表单元素相比，它的样式设置相对容易，其盒模型、字体、配色方案等都可以使用常规 CSS 轻松操作。

¥<textarea> is a replaced element — it has intrinsic dimensions, like a raster image. By default, its display value is inline-block. Compared to other form elements it is relatively easy to style, with its box model, fonts, color scheme, etc. being easily manipulable using regular CSS.

HTML 表单样式 提供了一些关于 <textarea> 样式的有用提示。

¥Styling HTML forms provides some useful tips on styling <textarea>s.

¥Baseline inconsistency

HTML 规范没有定义 <textarea> 的基线在哪里，因此不同的浏览器将其设置为不同的位置。对于 Gecko，<textarea> 基线设置在文本区域第一行的基线上，在其他浏览器上它可能设置在 <textarea> 框的底部。不要在上面使用 vertical-align: baseline；该行为是不可预测的。

¥The HTML specification doesn't define where the baseline of a <textarea> is, so different browsers set it to different positions. For Gecko, the <textarea> baseline is set on the baseline of the first line of the textarea, on another browser it may be set on the bottom of the <textarea> box. Don't use vertical-align: baseline on it; the behavior is unpredictable.

¥Controlling whether a textarea is resizable

在大多数浏览器中，<textarea> 都是可调整大小的 - 你会注意到右上角的拖动句柄，它可用于更改页面上元素的大小。这是由 resize CSS 属性控制的 - 默认情况下启用调整大小，但你可以使用 resize 值 none 显式禁用它：

¥In most browsers, <textarea>s are resizable — you'll notice the drag handle in the right-hand corner, which can be used to alter the size of the element on the page. This is controlled by the resize CSS property — resizing is enabled by default, but you can explicitly disable it using a resize value of none:

textarea {
  resize: none;
}

¥Styling valid and invalid values

<textarea> 元素的有效和无效值（例如 minlength、maxlength 或 required 设置的边界之内和之外的值）可以使用 :valid 和 :invalid 伪类高亮。例如，根据文本区域有效还是无效为文本区域提供不同的边框：

¥Valid and invalid values of a <textarea> element (e.g. those within, and outside the bounds set by minlength, maxlength, or required) can be highlighted using the :valid and :invalid pseudo-classes. For example, to give your textarea a different border depending on whether it is valid or invalid:

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

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

¥Examples

¥Basic example

以下示例显示了一个文本区域，其中包含一定数量的行和列、一些默认内容以及防止用户将元素大小调整为超过 500 像素宽和 130 像素高的 CSS 样式：

¥The following example shows a textarea with a set number of rows and columns, some default content, and CSS styles that prevent users from resizing the element more than 500px wide and 130px high:

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

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

结果

¥Result

¥Example using "minlength" and "maxlength"

此示例的最小和最大字符数分别为 10 和 20。尝试一下看看。

¥This example has a minimum and maximum number of characters — of 10 and 20 respectively. Try it and see.

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

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

结果

¥Result

请注意，minlength 不会阻止用户删除字符，从而使输入的数字超过最小值，但它确实会使输入到 <textarea> 中的值无效。另请注意，即使你设置了 minlength 值（例如 3），空的 <textarea> 仍被视为有效，除非你还设置了 required 属性。

¥Note that minlength doesn't stop the user from removing characters so that the number entered goes past the minimum, but it does make the value entered into the <textarea> invalid. Also note that even if you have a minlength value set (3, for example), an empty <textarea> is still considered valid unless you also have the required attribute set.

¥Example using "placeholder"

此示例设置了占位符。请注意，当你开始在框中输入内容时，它是如何消失的。

¥This example has a placeholder set. Notice how it disappears when you start typing into the box.

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

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

结果

¥Result

注意：占位符只能用于显示应输入表单的数据类型的示例；它们不能替代与输入相关的适当 <label> 元素。完整解释请参见 <input> 标签。

¥Note: Placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input. See <input> labels for a full explanation.

¥Disabled and readonly textareas

此示例显示两个 <textarea> — 一个是 readonly，一个是 disabled。你无法编辑任一元素的内容，但 readonly 元素是可聚焦的，并且其值以表单形式提交。disabled 元素的值未提交并且不可聚焦。

¥This example shows two <textarea>s — one is readonly and one is disabled. You cannot edit the contents of either element, but the readonly element is focusable and its value is submitted in forms. The disabled element's value is not submitted and it's not focusable.

<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;
}

结果

¥Result

¥Technical summary

¥See also

• 其他与表单相关的元素：
  • <form>
  • <button>
  • <datalist>
  • <legend>
  • <label>
  • <select>
  • <optgroup>
  • <option>
  • <input>
  • <fieldset>
  • <output>
  • <progress>
  • <meter>