使用 textarea 标签可创建多行文本框，通过 rows 和 cols 设置行列数，name 定义字段名，支持 maxlength 限制字符数、placeholder 提示文本，并可用 CSS 控制样式，常用于表单提交多行内容。

要创建一个HTML多行文本框，使用 textarea 标签即可。它专门用于支持用户输入多行文本内容，比如留言、评论、描述等。

使用 textarea 创建多行文本框

textarea 是HTML中唯一支持多行输入的表单元素。与单行的 input 元素不同，用户可以在其中按回车换行，输入多段文字。

基本语法如下：

<textarea name="message" rows="5" cols="40">
请输入您的意见...
</textarea>

说明：

立即学习“前端免费学习笔记（深入）”；

• rows：指定可见行数，例如 5 行
• cols：指定每行可见字符数（按等宽字体计算）
• name：表单提交时的字段名
• 标签之间的内容是默认显示的文本（可为空）

设置最大长度和占位符

可以添加属性来优化用户体验：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

<textarea name="feedback" rows="6" cols="50" maxlength="500" placeholder="请写下您的反馈，最多500字..."></textarea>

• maxlength：限制用户输入的最多字符数
• placeholder：显示提示文字，输入时自动消失

通过CSS控制样式和大小

虽然可以用 rows 和 cols 设置大小，但更推荐使用CSS进行精确控制：

<textarea name="content" style="width: 100%; height: 120px; padding: 10px;"></textarea>

也可以在CSS中定义：

textarea {
width: 100%;
height: 150px;
resize: vertical; /* 或 none, both 控制是否可拖动调整大小 */
font-family: Arial, sans-serif;
}

表单中提交多行内容

textarea 通常放在 form 中，提交后服务端可通过 name 属性获取其内容：

<form action="/submit" method="post">
<label>留言：</label>
<textarea name="message" rows="4" cols="50"></textarea>
<button type="submit">提交</button>
</form>

用户输入的换行符会作为 \n 传递给服务器，后端需正确处理换行显示。

基本上就这些。使用 textarea 是实现多行输入最直接有效的方式，兼容所有浏览器，语义清晰，易于样式控制。