HTML <textarea> 标签

在 HTML 表单开发中，<textarea> 标签允许用户输入多行文本。

与我们上一章学过的、专为单行文本设计的 <input type="text"> 不同，<textarea> 提供了一个更宽敞的空间，非常适合让用户撰写长篇留言、详细评论、个人简介或任何需要换行的大段文字 。

1. 认识 <textarea> 标签

<textarea> 标签定义了一个多行文本输入控件。用户可以在其中输入几乎不限长度的文本（除非你做了限制）。当表单被提交时，<textarea> 里的所有文字（包括换行符）都会一并发送给服务器。

1.1 基础语法结构

使用 <textarea> 标签的基础语法如下：

<textarea name="message" rows="4" cols="50">
请在这里输入您的留言...
</textarea>

代码拆解分析：

• <textarea> 和 </textarea>： 这是一个成对出现的标签，分别代表多行文本框的开始和结束。
• name 属性： 指定这个文本区域的名称。在这个例子中是 "message"。在将表单数据提交到服务器时，后端就是靠这个名字来认领数据的，极其重要。
• rows 属性： 指定文本框的可见高度（按文本行数计算）。这里设置为 "4"，意味着文本框在页面上初始化时，高度刚好能显示 4 行文字。
• cols 属性： 指定文本框的可见宽度（按平均字符宽度计算）。这里设置为 "50"，意味着文本框初始化时，宽度大约能容纳 50 个字符。
• 标签之间的文本 ("请在这里输入您的留言...")： 这会作为文本框的默认初始值显示出来。注意，如果用户不删掉它直接提交，这段话也会被提交上去。(现在更推荐使用 placeholder 属性来做提示，后面会讲。)

2. <textarea> 的核心控制属性

除了基础的尺寸控制，<textarea> 还支持多种属性来精细化控制其行为和外观：

• name： （必填）文本框的名称，用于表单提交时标识数据。
• 示例： <textarea name="feedback"></textarea>
• rows 和 cols： 控制文本框在页面上的初始行数（高度）和列数（宽度）。
• 示例： <textarea rows="10" cols="30"></textarea>
• maxlength： 严格限制用户在这个文本框中最多能输入的字符数。
• 示例： <textarea maxlength="200"></textarea>
• placeholder： （推荐使用）提供一段浅色的提示文字，描述该填什么内容。当文本框为空时它会显示，用户一开始打字它就会自动消失。它比把提示语直接写在标签中间要好用得多。
• 示例： <textarea placeholder="请留下您宝贵的意见"></textarea>
• required： 必填项校验。标记此属性后，用户必须在文本框中输入内容，否则表单无法提交。
• 示例： <textarea name="comment" required></textarea>
• readonly： 只读属性。用户可以看到里面的文字，甚至可以选中复制，但绝对不能修改它。
• 示例： <textarea name="terms" readonly>这里是服务条款的内容...</textarea>
• disabled： 禁用属性。被禁用的文本框会变成灰色，用户既不能编辑它，在表单提交时，里面的数据也不会被发送给服务器。
• 示例： <textarea name="notes" disabled>此字段已禁用。</textarea>
• wrap： 控制表单提交时文本换行的处理方式。常见的值有 soft（在框内视觉换行，但提交给服务器时是一整长行）或 hard（在框内换行，提交给服务器时也会带上真正的换行符）。
• 注：在现代开发中，这个属性用得越来越少，前端的换行显示通常由 CSS 接管。

2.1 综合属性应用示例

让我们把这些属性组合起来，打造一个功能完善的文本框：

<textarea name="description" rows="5" cols="40" maxlength="500" placeholder="请输入详细描述（最多 500 字）" required></textarea>

在这个例子中：

1. 后端接收数据的名称是 "description"。
2. 初始尺寸是 5 行高、40 个字符宽。
3. 用户最多只能输入 500 个字。
4. 有浅灰色的提示语引导用户。
5. 这是个必填项，不填不让提交表单。

3. 实战演练：<textarea> 常见应用场景

让我们通过几个真实的案例，看看 <textarea> 在实际开发中是怎么用的。

3.1 场景 1：基础留言板

这是一个最基础的留言表单，让用户自由输入想法：

<form>
  <label for="comment">请输入您的留言：</label><br>
  <textarea id="comment" name="comment" rows="4" cols="50"></textarea><br><br>
  
  <input type="submit" value="提交留言">
</form>

解析：

• 使用 <label> 标签并通过 for 属性与 <textarea> 的 id 绑定，不仅提升无障碍访问体验，点击文字也能激活输入框。
• 设置了 rows="4" 和 cols="50" 给定初始大小。

3.2 场景 2：带字数限制的意见反馈表

这个场景中，我们要收集用户的反馈，但为了防止恶意灌水，我们需要限制字数并给与提示。

<form>
  <label for="feedback">提供您的反馈：</label><br>
  <textarea id="feedback" name="feedback" rows="5" cols="60" maxlength="250" placeholder="写下你的反馈意见（最多 250 字）"></textarea><br><br>
  
  <input type="submit" value="提交反馈">
</form>

解析：

• maxlength="250" 充当了“保安”，坚决不允许输入超过 250 个字符。
• placeholder 友善地告诉用户字数上限。

3.3 场景 3：服务条款与隐私政策展示框

有时候你需要让用户阅读长篇大论的条款，你不希望他们修改文字，只需要他们勾选同意。这时候 readonly 属性就派上用场了。

<form>
  <label for="terms">服务条款与条件：</label><br>
  <textarea id="terms" name="terms" rows="10" cols="60" readonly>
    欢迎使用本服务。在您开始之前，请仔细阅读以下条款：
    1. 您必须遵守所有适用法律...
    ... (这里省略几千字) ...
  </textarea><br><br>
  
  <input type="checkbox" id="agree" name="agree" required>
  <label for="agree">我已阅读并同意上述服务条款</label><br><br>
  
  <input type="submit" value="注册">
</form>

解析：

• <textarea> 加上了 readonly，变成了一个纯展示的滚动文本框 。
• 下方配合一个带 required 属性的 <input type="checkbox">（复选框），强制用户必须打勾才能点击“注册”。