html怎么制作一个留言板？

陆砚码

2026-10-27 • 👁 0人浏览过

留言板需后端才能持久保存数据，纯HTML无法存储；本地调试可用localStorage模拟，上线必须配真实后端或第三方服务，表单须语义化、防默认提交并校验。留言板需要后端才能真正保存数据纯 HTML 无法持久保存用户提交的留言——它只是静态结构，没有存储能力。如果你用

提交到一个地址（比如

action="/submit"

），浏览器会发起请求，但服务器端必须有对应逻辑接收、校验、存入数据库或文件，否则表单提交后页面刷新、数据就丢了。常见错误现象：

405 Method Not Allowed

（没配 POST 路由）、

404 Not Found

（后端没写处理接口）、提交后页面空白或跳转失败（前端没加

event.preventDefault()

且后端没返回响应）。可选轻量方案：本地调试阶段用

localStorage

模拟存储（仅限当前浏览器，关掉就清空）上线部署时必须配真实后端：Node.js + Express、Python Flask、PHP 或 Serverless 函数（如 Vercel/Cloudflare Functions）不想写后端？可用第三方服务，比如

Formspree

（免费版限每日 50 次）、

Netlify Forms

（需托管在 Netlify） HTML 表单结构要包含必要字段和语义化标签一个可用的留言表单不能只有

和

</code></div>
，否则无障碍访问差、移动端体验弱、JS 获取困难。
立即学习
“
前端免费学习笔记（深入）
”；
关键点：
每个输入项必须有
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><label for="xxx"></code></div>
关联
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">id</code></div>
，比如
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><label for="message">留言内容</label><textarea id="message" name="message">

必须带

method="POST"

（即使前端用 JS 提交，也建议设好）和有效的

action

（开发时可先设为

#

）给

</code></div>
加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">required</code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">maxlength="500"</code></div>
控制输入长度，避免后端被超长文本冲击
禁用默认提交行为：给
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><form></code></div>
绑定
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">submit</code></div>
事件并调用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">event.preventDefault()</code></div>
用 JavaScript 实现本地 localStorage 存储和渲染
适合学习、演示或纯静态站点临时使用。注意：不同域名、无痕窗口、清除缓存都会丢失数据。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
核心操作：
提交时用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">JSON.stringify()</code></div>
把留言对象转成字符串，存进
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">localStorage.setItem('messages', str)</code></div>
加载页面时用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">localStorage.getItem('messages')</code></div>
读取，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">JSON.parse()</code></div>
还原为数组
渲染列表用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">messages.forEach(msg => { ... })</code></div>
拼接
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><div class="msg">...</code></div>
，再插入到
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><div id="msg-list"></div></code></div>
别忘了清空
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><textarea></code></div>
并聚焦回输入框：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">textarea.value = ''; textarea.focus();</code></div>
示例片段（不依赖框架）：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">document.getElementById('msg-form').addEventListener('submit', e => {
  e.preventDefault();
  const msg = document.getElementById('message').value.trim();
  if (!msg) return;
  const messages = JSON.parse(localStorage.getItem('messages') || '[]');
  messages.push({ text: msg, time: new Date().toISOString() });
  localStorage.setItem('messages', JSON.stringify(messages));
  renderMessages();
});</code></div>
部署前必须检查跨域和 CSP 限制
如果后端 API 在另一个域名（比如
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">https://api.example.com</code></div>
），而你的 HTML 托管在
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">https://site.netlify.app</code></div>
，浏览器会拦截请求，报错
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">CORS policy: No 'Access-Control-Allow-Origin' header</code></div>
。
解决方案取决于你控制哪一端：
你控制后端：在响应头加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">Access-Control-Allow-Origin: *</code></div>
（开发可，生产建议指定域名）
你只控制前端：改用同源 API（比如 Netlify Functions 的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">/.netlify/functions/submit</code></div>
）或代理（Vite 的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">server.proxy</code></div>
、Webpack DevServer 的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">proxy</code></div>
）
若用 CDN 或安全策略严格（如 GitHub Pages 默认启用了 CSP），检查是否屏蔽了
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">fetch</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">script</code></div>
请求 —— 可能需要调整
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><meta http-equiv="Content-Security-Policy"></code></div>
容易被忽略的是：本地双击打开 HTML 文件（
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">file://</code></div>
协议）时，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">localStorage</code></div>
可用，但
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">fetch</code></div>
会被直接拒绝，连 CORS 都不报 —— 必须起本地服务（
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">npx serve</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">python3 -m http.server</code></div>
）才能测试真实网络请求。
                            </div>

                            <!-- 文章导航 -->
                            <nav class="phpwebsoft-article-nav" aria-label="文章导航">

    
                                <a href="http://www.phpwebsoft.com/news/31455.html" class="phpwebsoft-article-nav-link phpwebsoft-article-nav-prev">
                                    <span>‹</span>
                                    <div>
                                        <div class="phpwebsoft-article-nav-label">上一篇</div>
                                        <div class="phpwebsoft-article-nav-title">HTML哈希能提升前端路由吗_HTML哈希改善前端路由效果【解析】</div>
                                    </div>
                                </a>
    


    
                                <a href="http://www.phpwebsoft.com/news/31524.html" class="phpwebsoft-article-nav-link phpwebsoft-article-nav-next">
                                    <div>
                                        <div class="phpwebsoft-article-nav-label">下一篇</div>
                                        <div class="phpwebsoft-article-nav-title">一道JS前端闭包面试题解析_javascript技巧</div>
                                    </div>
                                    <span>›</span>
                                </a>
    

                            </nav>
                        </div>
                    </article>

                    <!-- 相关文章列表 -->
                    <section class="phpwebsoft-content-section" style="margin-top: 20px;">
                        <h2 class="phpwebsoft-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="phpwebsoft-article-list">

    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/31455.html" class="phpwebsoft-article-link">HTML哈希能提升前端路由吗_HTML哈希改善前端路由效果【解析】</a>
                                <div class="phpwebsoft-article-meta">2026-10-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/31342.html" class="phpwebsoft-article-link">CSS样式引入时如何避免白屏_使用关键CSS内联策略优化感知</a>
                                <div class="phpwebsoft-article-meta">2026-10-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/31327.html" class="phpwebsoft-article-link">多屏复杂动画CSS技巧有哪些?动画CSS技巧总结</a>
                                <div class="phpwebsoft-article-meta">2026-10-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/31312.html" class="phpwebsoft-article-link">怎么在手机上运行html文件夹_手机运行html文件夹方法【教程】</a>
                                <div class="phpwebsoft-article-meta">2026-10-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/31252.html" class="phpwebsoft-article-link">除了Bootstrap，还有什么好用的响应式网站开发框架？</a>
                                <div class="phpwebsoft-article-meta">2026-10-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/31524.html" class="phpwebsoft-article-link">一道JS前端闭包面试题解析_javascript技巧</a>
                                <div class="phpwebsoft-article-meta">2026-10-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/31546.html" class="phpwebsoft-article-link">Vue 3 数据编辑页返回列表页数据未刷新如何解决？</a>
                                <div class="phpwebsoft-article-meta">2026-10-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/31549.html" class="phpwebsoft-article-link">Bootstrap 5 的 Modal 弹窗背景点击不关闭 Bootstrap 弹窗配置优缺点</a>
                                <div class="phpwebsoft-article-meta">2026-10-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/31550.html" class="phpwebsoft-article-link">如何用css实现弹性盒子容器布局</a>
                                <div class="phpwebsoft-article-meta">2026-10-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/31604.html" class="phpwebsoft-article-link">如何使用PS在文字中添加文字?PS制作字中字文字效果教程</a>
                                <div class="phpwebsoft-article-meta">2026-10-27</div>
                            </li>
    

                        </ul>
                    </section>
                </div>

                <!-- 右侧边栏 -->
                <aside class="phpwebsoft-sidebar phpwebsoft-sidebar-right" aria-label="侧边栏">
    <!-- 推荐阅读 -->
    <div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">推荐阅读</h3>
        <div class="phpwebsoft-recommend-grid">

    
            <a href="http://www.phpwebsoft.com/news/31646.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="如何在CSS中实现Grid按钮组布局_Grid template-columns与gap优化方案">
                </div>
                <div class="phpwebsoft-recommend-title">如何在CSS中实现Grid按钮组布局_Grid template-columns与gap优化方案</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/31639.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="CSS如何通过BEM提升代码的可搜索性_使用规范化类名快速定位">
                </div>
                <div class="phpwebsoft-recommend-title">CSS如何通过BEM提升代码的可搜索性_使用规范化类名快速定位</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/31627.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="HTML数据怎样进行版本管理 HTML数据版本控制的解决方案">
                </div>
                <div class="phpwebsoft-recommend-title">HTML数据怎样进行版本管理 HTML数据版本控制的解决方案</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/31622.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="reversed属性有什么用_HTML ol列表倒序排列实战演练">
                </div>
                <div class="phpwebsoft-recommend-title">reversed属性有什么用_HTML ol列表倒序排列实战演练</div>
            </a>
    

        </div>
    </div>

    <!-- 最新文章 -->
    <div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">最新文章</h3>
        <ul class="phpwebsoft-article-list">

    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/31646.html" class="phpwebsoft-article-link">如何在CSS中实现Grid按钮组布局_Grid template-columns与gap优化方案</a>
                <div class="phpwebsoft-article-meta">2026-10-27</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/31639.html" class="phpwebsoft-article-link">CSS如何通过BEM提升代码的可搜索性_使用规范化类名快速定位</a>
                <div class="phpwebsoft-article-meta">2026-10-27</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/31627.html" class="phpwebsoft-article-link">HTML数据怎样进行版本管理 HTML数据版本控制的解决方案</a>
                <div class="phpwebsoft-article-meta">2026-10-27</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/31622.html" class="phpwebsoft-article-link">reversed属性有什么用_HTML ol列表倒序排列实战演练</a>
                <div class="phpwebsoft-article-meta">2026-10-27</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/31608.html" class="phpwebsoft-article-link">html5如何保存数据_HTML5本地存储保存数据方法详解【数据保存】</a>
                <div class="phpwebsoft-article-meta">2026-10-27</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/31604.html" class="phpwebsoft-article-link">如何使用PS在文字中添加文字?PS制作字中字文字效果教程</a>
                <div class="phpwebsoft-article-meta">2026-10-27</div>
            </li>
    

        </ul>
    </div>

    <!-- 热门标签 -->
    <div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">热门标签</h3>
        <div class="phpwebsoft-article-tag-list">

    
            <a href="http://www.phpwebsoft.com/tag/1687" class="phpwebsoft-article-tag-item">html</a>
    

        </div>
    </div>
</aside>
            </div>
        </div>
    </main>


    <!-- 页脚 -->
    <footer class="phpwebsoft-footer">
        <div class="phpwebsoft-container">
            <div class="phpwebsoft-footer-links" style="justify-content: center;">
                
                
                <a href="http://www.phpwebsoft.com/22.html" class="phpwebsoft-footer-link">免责声明</a>
                
                <a href="http://www.phpwebsoft.com/23.html" class="phpwebsoft-footer-link">关于我们</a>
                
                <a href="http://www.phpwebsoft.com/24.html" class="phpwebsoft-footer-link">联系我们</a>
                
                <a href="http://www.phpwebsoft.com/25.html" class="phpwebsoft-footer-link">投诉删除</a>
                
                <a href="http://www.phpwebsoft.com/26.html" class="phpwebsoft-footer-link">投稿须知</a>
                
                
            </div>
            <div class="phpwebsoft-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 websoft网络软件专家
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025061481号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button class="phpwebsoft-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>

    <!-- 公共脚本 -->
    <script src="http://www.phpwebsoft.com/static/v10/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
</html>