61. textarea 多行文本输入

input type="text" 只能单行。要写一段话，得用 <textarea>。

基本用法

<textarea name="comment" rows="5" cols="40"></textarea>

• rows：可见行数（高度）
• cols：可见字符宽度

标签之间的内容是默认值。注意不要有空格：

<!-- 正确 -->
<textarea name="bio">这个人很懒，什么都没有留下。</textarea>

<!-- 错误（前面有换行和空格） -->
<textarea name="bio">
  这个人很懒，什么都没有留下。
</textarea>

placeholder 占位提示

<textarea name="feedback" placeholder="请写下你的建议..."></textarea>

用户开始输入后提示消失。

maxlength 字数限制

<textarea name="intro" maxlength="200" rows="4"></textarea>

超过 200 个字就输不进去了。

禁止缩放

浏览器默认允许用户拖拽 textarea 右下角来调整大小。

要禁止的话用 CSS：

textarea {
  resize: none;
}

也可以只允许水平或垂直缩放：

textarea {
  resize: horizontal; /* 只能水平缩放 */
}
textarea {
  resize: vertical;   /* 只能垂直缩放 */
}

wrap 换行模式

<textarea name="code" wrap="off"></textarea>

• soft（默认）：文本在浏览器中自动换行，但提交给服务器时不包含换行符
• hard：文本在浏览器中自动换行，提交给服务器时包含换行符

日常开发很少改这个属性。

推荐用 CSS 控制大小

虽然 rows/cols 能定义大小，实际开发中更常用 CSS：

textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  box-sizing: border-box;
}

width: 100% 让宽度自适应父容器，min-height 设定最小高度。

box-sizing: border-box 确保 padding 不会让宽度超出父容器。

完整示例

一个”联系我们”的留言表单：

<form action="/message" method="post">
  <p>
    <label for="subject">主题：</label><br>
    <input type="text" id="subject" name="subject" required style="width:100%">
  </p>
  <p>
    <label for="message">留言内容：</label><br>
    <textarea id="message" name="message" rows="6"
              maxlength="500" placeholder="请输入你的留言（最多500字）..."
              required style="width:100%"></textarea>
  </p>
  <p>
    <button type="submit">发送留言</button>
  </p>
</form>

textarea vs input

对比项	textarea	input type=“text”
行数	多行	单行
自闭合	否（有开始和结束标签）	是
默认值	写在标签之间	用 value 属性
适用场景	评论、文章、留言	姓名、标题、标签

简单说：短文本用 input，长文本用 textarea。