HTML 中的 textarea

学习目标

理解 <textarea> 元素的基本结构与核心属性
掌握 name 属性在表单提交、服务端处理和前端脚本中的关键作用
能够正确设置尺寸、默认内容与用户提示
遵循命名规范与最佳实践，提升表单的可用性与可维护性

什么是 `<textarea>`

<textarea> 是 HTML 中用于创建多行文本输入区域的表单控件。与单行 <input type="text"> 不同，它允许用户输入包含换行符的长文本，常用于评论、反馈、简介等场景。

<textarea name="字段名" rows="4" cols="50">默认内容</textarea>

注意：<textarea> 是双标签，必须显式闭合。

核心属性

`name`

作用：定义表单字段的名称，在提交时作为数据的“键”。
用途：
- 表单提交时生成 name=value 数据对
- 服务端通过该名称获取用户输入
- JavaScript 可通过 document.querySelector('[name="xxx"]') 操作元素

<textarea name="userFeedback"></textarea>
<!-- 提交后，服务器收到：userFeedback=用户输入的内容 -->

`rows` 和 `cols`

rows="4"：设置可见行数（控制高度）
cols="50"：设置每行可见字符数（控制宽度）

这两个属性是纯 HTML 尺寸控制，现代开发中通常用 CSS 替代（如 width、height）。

默认内容与占位符

标签内的文本：是实际默认值，用户需手动删除。
placeholder 属性：显示灰色提示文字，不作为初始值。

<!-- 默认内容（不推荐用于提示） -->
<textarea>请输入意见...</textarea>

<!-- 推荐：使用 placeholder -->
<textarea placeholder="请输入您的宝贵意见..."></textarea>

完整示例

<!DOCTYPE html>
<html>
<head>
  <title>textarea 使用示例</title>
  <style>
    textarea {
      width: 100%;
      max-width: 500px;
      padding: 8px;
      font-family: "Microsoft YaHei", sans-serif;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    label {
      display: block;
      margin-bottom: 6px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h3>用户反馈</h3>
  <form action="/submit" method="post">
    <label for="feedback">您的建议：</label>
    <textarea 
      id="feedback"
      name="userFeedback"
      rows="5"
      placeholder="请描述您遇到的问题或改进建议..."
    ></textarea>
    <br><br>
    <button type="submit">提交反馈</button>
  </form>
</body>
</html>

此例中：
name="userFeedback" 用于数据提交
id="feedback" 与 <label> 关联，提升可访问性
placeholder 提供友好提示
CSS 控制外观，替代 cols

`name` 属性

唯一性

同一表单内，每个控件的 name 必须唯一，避免数据冲突。

语义化命名

使用清晰、有意义的名称，便于理解与维护：

<!-- 推荐 -->
<textarea name="productReview"></textarea>
<textarea name="supportMessage"></textarea>

<!-- 不推荐 -->
<textarea name="txt1"></textarea>
<textarea name="area2"></textarea>

避免特殊字符

仅使用字母、数字、下划线或连字符，禁用空格和中文：

<!-- 正确 -->
<textarea name="user_comment"></textarea>

<!-- 错误 -->
<textarea name="用户留言"></textarea>

总结

<textarea> 是处理多行文本输入的标准 HTML 元素。
name 属性是表单数据传输的核心，不可或缺。
结合 placeholder、required、minlength 等属性可提升用户体验。
始终为 <textarea> 添加 <label> 并通过 id 关联，确保无障碍访问。
用 CSS 替代 cols/rows 进行样式控制，符合现代开发规范。

掌握这些要点，你将能高效、规范地使用 <textarea> 构建用户友好的表单。

思考题

如果一个 <textarea> 有 id 但没有 name，它能否在表单提交时被发送到服务器？为什么？
在什么情况下你会选择使用 rows/cols 而不是 CSS 来控制 <textarea> 的大小？
如何防止用户在 <textarea> 中粘贴超长内容（例如限制最多 500 字）？请给出前端和后端的双重解决方案思路。

源本科技 | 码上会