HTML <textarea> 标签

1. 概述

在网页开发中，<textarea> 标签用于创建多行的文本输入区域。该元素允许用户输入和编辑大量的文本数据，常见于在线评论、留言板等场景。

2. <textarea> 标签语法

<textarea name="名称" rows="行数" cols="列数">
  默认文本（可选）
</textarea>
  • name：定义输入区域的名称，用于在提交表单时标识数据。
  • rows：指定输入区域的行数。
  • cols：指定输入区域的列数。
  • 默认文本（可选）：放置在 <textarea> 和 </textarea> 标签之间的内容将作为初始值显示在输入区域中。

3. 常用属性

  1. placeholder：指定一个短提示，描述了输入区域期望的输入数据类型或有关文本的简要信息。
  2. disabled：当设置该属性时，表单控件将被禁用，用户无法编辑其中的内容。
  3. readonly：当设置该属性时，表单控件只读，不可编辑，但是可以选择和复制文本。
  4. maxlength：指定输入区域的最大字符数限制。
  5. autofocus：当页面加载完成后，自动将焦点设置到输入区域中。
  6. wrap：控制文本在输入区域中的换行方式，可选值为 "soft"（默认）和 "hard"。

4. 示例

<form action="">
  <textarea name="comment" rows="4" cols="50" placeholder="请输入您的评论..." maxlength="200"></textarea>
  <br>
  <input type="submit" value="提交">
</form>

在上述示例中，我们创建了一个文本输入区域，用于接收用户的评论。其中 maxlength 属性限制了最大字符数为200个。

5. 注意事项

  • <textarea> 标签不能嵌套在按钮标签 <button> 中。
  • 由于 HTML 编码的原因，<textarea> 标签中的文本不会被解析为 HTML 代码，即使输入了 HTML 标记也会被视为普通字符串。

6. 总结

熟练掌握 <textarea> 标签能够帮助我们在网页中创建多行文本输入区域，提升用户的交互体验。正确使用该标签可以增强表单的功能和实用性，为数据收集和处理打下坚实的基础。