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