HTML在线留言代码

直接扔个能跑的东西出来。下面这段代码复制到任何 .html 文件里，线留用浏览器打开，言代就是线留一个能提交、能显示的言代留言板。没有后端，线留数据存在浏览器内存里，言代刷新就丢——但用来理解表单交互足够了。线留

先看核心结构。言代留言板不外乎三块：表单输入区、线留提交按钮、留言列表容器。HTML 负责骨架，CSS 管长相，JavaScript 把数据从输入框搬到列表里。就这么简单。

注意 required 属性，浏览器原生校验，空着不让提交。省掉一堆 JS 判断。很多人喜欢用 placeholder 代替 label，视觉上干净，但可访问性会打折扣——看你取舍。

样式不用太花哨，但得能看

我习惯给输入框加个圆角、聚焦时亮蓝边框。留言列表每条用卡片隔开，鼠标悬停轻微浮起。这种微交互不费事，但体验差别很大。下面这段 CSS 直接抄。

颜色我用了深蓝黑 #0f172a 做主色，比纯黑柔和。背景 #f8fafc 是那种带一点点蓝的灰白，眼睛不累。你要是喜欢暗色模式，改几个变量的事。

JavaScript 才是灵魂

监听表单提交，阻止默认刷新，把输入的值抓出来，生成一个 DOM 节点插到列表最前面。就这几步。但有个细节：用户提交后要清空输入框，并且把焦点还给名字输入框——方便连续留言。

注意 textContent 那行。很多人图省事用 innerHTML 直接塞用户输入，结果被人注个 <script> 就完蛋。留言板虽小，安全习惯得从第一天养起。名字那里我手动做了转义，因为用了 innerHTML 拼字符串——其实也可以用 textContent 加多个节点，但那样代码更长。看你怎么权衡。

跑起来看看效果

下面是我把上面代码整合后的实际演示。你可以在输入框里打字，点发布，留言会立刻出现在下面。没有后端，刷新页面就清空——这恰恰方便你反复测试。

演示里我加了个空状态提示“还没有留言”，有数据时自动隐藏。这种小细节会让界面显得不那么愣。另外每条留言右上角显示“刚刚”，其实可以换成具体时间，但为了代码简洁，我直接写死了。你要做真实项目，用 new Date().toLocaleTimeString() 替换就行。

几个容易踩的坑

第一个，form 的默认提交行为会刷新页面，必须 e.preventDefault()。第二个，用 insertBefore 而不是 appendChild，新留言才在最上面。第三个，如果用户名字里带空格，记得 trim() 一下，不然会生成空白条目。

还有个隐藏问题：连续快速点击提交按钮，会瞬间插入多条相同留言。简单加个 disabled 状态或者防抖，但演示代码里我没加——你自己扩展的时候留个心。

最后说存储。现在数据在内存里，刷新就没。想持久化，把留言数组存到 localStorage，页面加载时读出来渲染。改动量不大，但那是另一个话题了。先把上面这套跑通，比什么都强。