<textarea>：文本区域元素

试一试

<label for="story">Tell us your story:</label>

<textarea id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
</textarea>

label,
textarea {
  font-size: 0.8rem;
  letter-spacing: 1px;
}

textarea {
  padding: 10px;
  max-width: 100%;
  line-height: 1.5;
  border-radius: 5px;
  border: 1px solid #cccccc;
  box-shadow: 1px 1px 1px #999999;
}

label {
  display: block;
  margin-bottom: 10px;
}

上面的示例演示了 <textarea> 的许多功能

• 一个 id 属性，用于使 <textarea> 与 <label> 元素关联，以实现可访问性
• 一个 name 属性，用于设置表单提交时发送到服务器的关联数据点的名称。
• rows 和 cols 属性允许你为 <textarea> 指定精确的尺寸。设置这些属性有助于保持一致性，因为浏览器默认值可能有所不同。
• <textarea> 元素在 HTML 和 JavaScript 上下文中指定其内容的方式不同
  • 在 HTML 中，<textarea> 的初始内容是在其开始和结束标签之间指定的，而不是作为 value 属性。
  • 在 JavaScript 中，<textarea> 元素有一个 value 属性，可用于获取或设置当前内容，以及 defaultValue 用于获取和设置其初始值（相当于访问 HTML 元素的文本内容）。

<textarea> 元素还接受一些与表单 <input> 常见的属性，例如 autocapitalize、autocomplete、autofocus、disabled、placeholder、readonly 和 required。

属性

此元素包含全局属性。

autocapitalize

控制输入文本是否自动大写，以及以何种方式大写。

autocomplete

控制浏览器是否可以自动完成输入的文本。可能的值是

• off：用户每次使用都必须显式地在此字段中输入一个值，或者文档提供了自己的自动完成方法；浏览器不会自动完成输入。
• on：浏览器可以根据用户之前使用时输入的值自动完成该值。
• <token-list>：一组有序的、空格分隔的自动填充详细信息令牌，可选地前面可以有一个分区令牌、一个账单或送货分组令牌，和/或一个标识接收者类型的令牌。

未指定 autocomplete 属性的 <textarea> 元素会继承其表单所有者上设置的 autocomplete 状态（on 或 off）。表单所有者可以是此 <textarea> 元素的祖先 <form> 元素，或者是其 id 由输入元素的 form 属性指定的表单元素。有关更多信息，请参阅 <form> 中的 autocomplete 属性。

autocorrect

控制用户编辑此 textarea 时，是否启用自动拼写校正和文本处理。允许的值是

启用

启用自动拼写校正和文本替换。

关闭

禁用自动拼写校正和文本替换。

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 是其默认值。

使用 CSS 样式

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

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

基线不一致

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

控制文本区域是否可调整大小

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

textarea {
  resize: none;
}

有效和无效值的样式

<textarea> 元素的有效和无效值（例如，那些在 minlength、maxlength 或 required 设置的界限之内或之外的值）可以使用 :valid 和 :invalid 伪类突出显示。例如，根据文本区域是否有效或无效，为其提供不同的边框

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

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

示例

基本示例

以下示例显示了一个具有固定行数和列数、一些默认内容以及阻止用户将元素大小调整为超过 500 像素宽和 130 像素高的 CSS 样式的文本区域

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

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

结果

使用“minlength”和“maxlength”的示例

此示例具有最小和最大字符数，分别为 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），空 <textarea> 仍被认为是有效的，除非你也设置了 required 属性。

使用“placeholder”的示例

此示例设置了一个占位符。请注意，当你开始在框中输入时，它会消失。

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