用原生<form>+<textarea name="comment">+submit事件拦截实现无刷新评论提交：设method="POST"、required、maxlength，JS中preventDefault()并取elements.comment.value发送。
怎么用 <form> 搭出能提交的评论框
一个可用的评论输入框，核心不是“看起来像”，而是能发数据、不刷新页面、不丢内容。最简路径是用原生 <form> + <textarea> + submit 事件拦截。别一上来就套框架或 AJAX 封装，先确保表单语义正确、默认行为可控。
常见错误现象：textarea 没设 name 属性，后端收不到字段；form 提交后整页刷新，用户刚输的内容没了；没加 required 却期望前端校验。
-
<form>必须带id或用querySelector能稳定获取，否则 JS 绑定事件会失效 -
<textarea name="comment">的name值要和后端约定一致，比如 Django 用request.POST.get('comment')，Express 用req.body.comment - 加
required属性可触发浏览器原生提示，但仅限非空校验；如需字数限制，得用 JS 监听input事件实时判断
为什么 textarea 比 input type="text" 更适合评论
评论天然需要换行、段落、多行表达。input type="text" 是单行控件，按 Enter 会直接触发表单提交，且无法显示换行符；textarea 原生支持回车换行、滚动、拉伸，语义上也明确表示“多行文本输入”。
性能与兼容性影响：所有现代浏览器对 textarea 渲染一致，无 polyfill 需求；而用 div contenteditable 模拟，会丢失表单序列化能力（formdata.append() 不识别）、光标定位异常、移动端键盘兼容差。
立即学习“前端免费学习笔记（深入）”；
- 设置
rows="3"控制默认高度，比用 CSSheight更可靠（避免被父容器裁剪） - 加
placeholder="说点什么..."，但别依赖它当 label——屏幕阅读器可能忽略，且输入后 placeholder 消失，可访问性下降 - 如果要限制最大长度，用
maxlength="500"（HTML5 原生支持），而非只靠 JS 截断，后者无法阻止粘贴超长文本
如何防止点提交后页面刷新又丢内容
表单默认行为就是跳转或刷新，这是 HTML 的设计逻辑。要保留当前页面状态，必须显式阻止它，再手动处理提交逻辑。
容易踩的坑：只写 onclick="return false" 在按钮上，但用户仍可按 Ctrl+Enter 触发 form submit；或者用 addEventListener('click', ...) 绑在按钮上，却没监听 submit 事件本身，导致回车提交失效。
- 正确做法：给
<form>元素绑定submit事件，调用event.preventDefault() - 示例代码片段：
document.getElementById('comment-form').addEventListener('submit', function(e) { e.preventDefault(); const text = this.elements.comment.value.trim(); if (text) { // 这里发请求或存 localStorage this.reset(); // 清空表单，比手动清空更安全 } }); - 别在
reset()后立刻聚焦textarea——移动端键盘可能闪退，等下一次 event loop 再focus()
后端接收不到评论内容？先查这三处
表单能显示、能点击、JS 也跑了，但后端 req.body 或 $_POST 为空，大概率卡在这几个技术细节上。
-
<form method="POST">缺少method="POST"，默认是 GET，大段文字会被截断或 URL 编码失败 - 没设
enctype="application/x-www-form-urlencoded"（默认值，不用显写），但如果用了FormData发送文件，就得改成multipart/form-data，否则纯文本也会被错解 - Node.js Express 项目没配
app.use(express.urlencoded({ extended: true }))，导致req.body始终为空对象
复杂点在于：前后端字段名大小写、下划线/驼峰风格是否统一，比如前端传 commentText，后端却取 comment_text——这种问题不会报错，只会静默丢数据。
