用 <form method="POST" action="#"> 包裹 input[title] 和 textarea[content]，设 name 属性、type="submit" 按钮，并用 onsubmit="return false;" 或 e.preventDefault() 阻止默认跳转。
怎么用 <form> 搭出一个能发帖的输入框
纯 HTML 本身不处理提交逻辑，但能搭出标题+内容的结构骨架。关键不是“做出来”，而是别让表单一提交就跳转或清空——这是新手最常懵的地方。
必须用 <form> 包住输入项，否则浏览器不知道哪些字段要一起发；method 设成 POST 更合理（标题和内容通常不暴露在 URL 里）；action 先设成 "#" 或留空，避免意外跳转：
<form method="POST" action="#"> <input type="text" name="title" placeholder="请输入标题"> <textarea name="content" placeholder="请输入正文"></textarea> <button type="submit">发布</button> </form>
-
name属性不能少，后端靠它识别字段，写成title和content是通用约定 -
<textarea>不要用value设默认值，得把文本写在开始和结束标签之间 - 别漏掉
type="submit"，否则按钮点下去没反应 - 如果加了
required属性，浏览器会自动校验非空，但只在提交时触发
为什么 textarea 换行不显示、内容被截断
这是 CSS 和 HTML 双重影响的结果：HTML 默认把换行当空白符压缩，<textarea> 的值虽然保留了换行符（\n），但渲染时不会自动转成 <br>；而展示内容时若用 <p> 直接插进去，换行就丢了。
- 输入阶段没问题——
<textarea>天然支持回车换行，值里有\n - 展示阶段要处理：服务端或 JS 得把
\n替换成<br>，或者用 CSSwhite-space: pre-line - 如果用
maxlength限制字数，注意中文、emoji 都算 1 个字符，但某些后端语言（如 PHP）默认按字节计，可能误判 - 别用
height+overflow: hidden去“固定”<textarea>高度，用户输多就看不见自己内容
提交后页面刷新、数据消失怎么办
这是没阻断表单默认行为的表现。HTML 表单提交必然触发页面跳转或刷新，除非你用 JS 显式阻止它。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 给
<form>加onsubmit="return false;"是最快捷的临时方案 - 更规范的做法是绑定 JS 事件：
form.addEventListener('submit', e => { e.preventDefault(); /* 发请求 */ }); - 如果用了
fetch()提交，记得手动清空字段或重置表单：form.reset() - 别在
submit事件里直接写fetch却忘了await，否则按钮点完立刻清空，但请求可能还没发出去
移动端键盘弹起后输入框被遮挡
这不是 HTML 能单独解决的问题，但起点在 HTML 结构是否利于后续适配。常见错误是把 <form> 放在页面底部且没设置最小高度，键盘一顶，<textarea> 就看不见了。
- 给
<form>或其父容器加min-height: 100vh，避免内容塌缩 -
<textarea>加scrollIntoView({ behavior: 'smooth' })在聚焦时调用，但得防重复触发 - iOS Safari 对
position: fixed+ 键盘的兼容性差，慎用“悬浮发布框”设计 - 别依赖
resize事件监听窗口高度变化来调整位置——很多安卓浏览器不触发这个事件
真正麻烦的从来不是搭出框，而是让不同设备上用户打完字、点一下，内容真能发出去，且知道自己发成了。中间任何一环断掉，比如网络慢时按钮没置灰、没提示、没防重复提交，体验就垮了。
