最常见原因是没写name属性；textarea必须设name才能提交数据，且需合法唯一；rows/cols非必需但建议设置，配合CSS优化；maxlength须设并配合前端提示；换行符需后端统一处理并用pre-wrap等保留显示。

直接用 <textarea></textarea> 就能收集长段留言，不需要 JS 也能工作，但漏掉 name 属性会导致后端收不到数据。

为什么提交后后端拿不到 <textarea></textarea> 的内容

最常见原因是没写 name 属性。表单提交时，浏览器只把带 name 的控件值发给服务器，<textarea></textarea> 没这个属性就等于“不存在”。

• name 必须是合法的标识符（不能含空格、特殊符号），且整个表单内最好唯一
• 别用 id 代替 name：ID 只用于前端操作或 <label for="..."></label> 关联，不参与表单提交
• 如果用了框架（如 React），确保不是用 value + onChange 控制了组件却忘了同步到表单字段

rows 和 cols 到底要不要设

不是必须，但不设容易在移动端渲染异常——比如默认 rows="2" 在小屏上几乎看不见输入区，用户可能以为没加载出来。

• rows 控制的是“可见行数”，不是最大行数；用户仍可输入更多，框会自动滚动
• cols 是基于等宽字体估算的字符宽度，实际受 CSS 字体影响大，纯靠它对齐不可靠
• 更稳妥的做法：用 rows 给个基础高度（如 rows="4"），再用 CSS 的 min-height 或 height 精确控制，同时加 resize: vertical

如何限制留言长度又不让用户困惑

仅靠 maxlength 会在输满时突然截断，体验差；用户也看不到还剩多少字。需要配合前端提示。

Ava Maker

Ava Maker是一款用于创建卡通头像、社交头像和 NFT 风格头像的在线工具。

下载

• maxlength 必须设，它是浏览器原生校验，防恶意超长提交
• 用 JS 做实时字数统计时，注意换行符 \n 算 1 个字符，和普通字母一样
• 显示剩余字数比“已输入 X 字”更友好，例如：剩余 <span id="remaining">200</span> 字
• 后端必须二次校验：前端限制可被绕过，maxlength 不会阻止通过 API 直接提交超长内容

用户按回车后，换行在页面上不显示怎么办

后端拿到的是带 \n 的字符串，但 HTML 默认忽略连续空白符，所以直接 echo 或 innerHTML 渲染会丢失换行。

• 服务端渲染时，用 nl2br()（PHP）或 white-space: pre-wrap（CSS）保留换行与空格
• 前端展示时，别用 textContent 覆盖，改用 innerText 或带样式处理的 innerHTML（注意 XSS！需先转义）
• 如果存的是富文本，<textarea></textarea> 不适合——它只接受纯文本，该换用 <div contenteditable> 或富文本编辑器 <p>真正容易被忽略的是：换行符在不同系统里可能是 <code>\n、\r\n 或 \r，后端统一处理成 \n 再存；还有，移动端软键盘的“换行”键行为不一致，有些会触发表单提交，得用 event.preventDefault() 拦住。