纯HTML无法实现真正留言功能，因无后端处理能力，提交后会报错或跳转空白页；需用JavaScript拦截默认行为并配合localStorage暂存，或对接真实后端接口。
纯 HTML 无法实现真正的留言功能——它没有后端处理能力，不能保存数据，也不能响应表单提交。所谓“HTML 留言板”，实际只是静态表单结构，提交后要么失败，要么跳转到空白页，用户看不到任何反馈。
为什么 <form> 提交后没反应或报错
这是最常遇到的困惑点。浏览器原生提交表单时，会向 action 指定的 URL 发送请求。如果该 URL 没有对应的服务端脚本（比如 PHP、Node.js 或 Python 后端），就会出现：
-
405 Method Not Allowed（常见于直接双击打开本地index.html） -
404 Not Found（action="save.php"但服务器没部署该文件） - 页面跳转到
about:blank或空白页（action=""且无 JS 拦截）
解决思路只有两个方向：加前端 JS 模拟提交（仅限临时测试），或配真实后端接口。
用 localStorage 实现本地暂存留言（纯前端可运行）
适合演示、教学、离线原型，所有数据只存在当前浏览器，关掉标签页就清空。关键不是“提交”，而是“拦截默认行为 + 存进本地”：
立即学习“前端免费学习笔记（深入）”；
<form id="msgForm">
<input type="text" id="userName" placeholder="昵称" required>
<textarea id="msgContent" placeholder="说点什么..." required></textarea>
<button type="submit">留言</button>
</form>
<div id="msgList"></div>
<script>
document.getElementById('msgForm').addEventListener('submit', function(e) {
e.preventDefault(); // 必须！否则触发原生提交
const name = document.getElementById('userName').value.trim();
const msg = document.getElementById('msgContent').value.trim();
if (!name || !msg) return;
const item = { name, msg, time: new Date().toLocaleString() };
const list = JSON.parse(localStorage.getItem('messages') || '[]');
list.push(item);
localStorage.setItem('messages', JSON.stringify(list));
renderList();
document.getElementById('msgForm').reset();
});
function renderList() {
const el = document.getElementById('msgList');
const list = JSON.parse(localStorage.getItem('messages') || '[]');
el.innerHTML = list.map(m =>
`<p><strong>${m.name}</strong>（${m.time}）：<br>${m.msg}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5030" title="Html To Pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/179031962213835.jpg" alt="Html To Pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5030" title="Html To Pdf">Html To Pdf</a>
<p>使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。</p>
</div>
<a href="/xiazai/skill5030" title="Html To Pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>`
).join('');
}
</script>
注意：localStorage 有容量限制（通常 5–10MB），且不同域名间不共享；敏感信息绝不能存这里。
对接真实后端接口（如 Express + MongoDB 示例）
真正可用的留言功能必须走 HTTP 请求。假设你已有 Node.js 环境和一个运行中的 API：
- 后端接口地址是
POST /api/messages - 期望接收 JSON：
{ "name": "张三", "content": "Hello" } - 返回成功状态码
201和新留言 ID
前端只需改 submit 事件里的逻辑：
fetch('/api/messages', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: document.getElementById('userName').value,
content: document.getElementById('msgContent').value
})
})
.then(res => {
if (res.ok) return res.json();
throw new Error('提交失败');
})
.then(data => {
alert('留言成功！ID：' + data.id);
document.getElementById('msgForm').reset();
})
.catch(err => console.error(err));
务必检查浏览器控制台的 Network 面板，确认请求是否发出、状态码是否为 200 或 201，而不是 500 或跨域错误 CORS —— 这类问题比逻辑错误更常卡住初学者。
表单验证、防重复提交、XSS 过滤、服务端存储可靠性，这些都不是 HTML 能管的事。别在 <form action="xxx"> 里死磕，先想清楚数据最终去哪、谁负责收、谁负责存。
