# 网页表单提交代码编写｜留言页面完整源码实操 ## 前言介绍网页表单是用户与网站交互最基础的方式，无论是注册登录、提交留言还是填写问卷，背后都依赖一套完整的前后端协作机制。很多初学者在写表单时，要么只做了前端样式，提交后数据丢失；要么后端代码写死，无法处理真实用户输入。本教程将带你从零构建一个完整的留言页面，包含前端HTML表单设计、CSS样式美化、JavaScript数据校验以及后端PHP接收处理，最终实现用户填写留言后数据能正确提交并存储到服务器，同时页面给出成功或失败的反馈。整个过程不需要任何框架，纯手写代码，适合刚接触全栈开发的读者。 ## 前置准备 1. **开发环境**：本地需要安装PHP运行环境，推荐使用集成工具如XAMPP、WampServer或MAMP。安装完成后启动Apache和MySQL服务。如果没有安装，也可以使用在线PHP沙盒（如phpcodechecker.com）临时测试，但本地环境更能体验完整流程。 2. **代码编辑器**：任意文本编辑器均可，推荐VS Code、Sublime Text或Notepad++，确保支持语法高亮。 3. **浏览器**：Chrome或Firefox，用于预览和调试，建议开启开发者工具（F12）查看网络请求和控制台错误。 4. **文件结构**：在网站根目录（如XAMPP的htdocs文件夹）下新建一个文件夹命名为“message_board”，后续所有代码文件都放在这个文件夹内。 5. **知识预备**：了解基础的HTML标签、CSS选择器、JavaScript函数和PHP语法即可，本教程会逐行解释。 ## 分步操作步骤 ### 第一步：创建HTML表单结构在“message_board”文件夹内新建文件“index.html”，用编辑器打开，写入以下完整代码。这段代码构建了一个包含姓名、邮箱、电话、留言内容的表单，并设置了基本的属性。 ```html 留言板 - 提交您的意见

给我们留言

请填写以下信息，我们会尽快回复您

``` **关键细节说明**： - `

`标签的`action="submit.php"`指定了表单数据发送到的后端文件，`method="POST"`表示数据通过HTTP POST请求发送，不会在URL中显示。 - 每个输入字段的`name`属性非常重要，后端PHP通过这个名称获取数据，例如`$_POST['name']`。 - `required`属性让浏览器在提交前做基础的空值检查，但不可完全依赖，后端仍需校验。 - `placeholder`提供输入提示，提升用户体验。 ### 第二步：编写CSS样式美化页面在相同文件夹内新建文件“style.css”，写入以下样式代码。这段代码让表单居中、添加阴影、输入框圆角、按钮悬停效果等，使页面看起来专业。 ```css /* 全局重置与基础字体 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } /* 容器卡片样式 */ .container { background: #ffffff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); padding: 40px 35px; max-width: 520px; width: 100%; } h1 { text-align: center; color: #333; font-size: 28px; margin-bottom: 5px; } .subtitle { text-align: center; color: #777; font-size: 14px; margin-bottom: 30px; } /* 表单组 */ .form-group { margin-bottom: 22px; } label { display: block; font-weight: 600; color: #444; margin-bottom: 6px; font-size: 15px; } .required { color: #e74c3c; } /* 输入框与文本域 */ input[type="text"], input[type="email"], input[type="tel"], textarea { width: 100%; padding: 12px 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 15px; transition: border-color 0.3s ease, box-shadow 0.3s ease; outline: none; font-family: inherit; } /* 聚焦状态 */ input:focus, textarea:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); } textarea { resize: vertical; min-height: 100px; } /* 提交按钮 */ button[type="submit"] { width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 17px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); } button[type="submit"]:active { transform: translateY(0); } /* 反馈信息区域 */ .feedback { margin-top: 20px; padding: 12px; border-radius: 8px; text-align: center; font-size: 15px; display: none; /* 默认隐藏，通过JavaScript显示 */ } .feedback.success { display: block; background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .feedback.error { display: block; background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* 响应式调整 */ @media (max-width: 480px) { .container { padding: 25px 20px; } h1 { font-size: 24px; } } ``` **样式要点**： - 使用渐变背景和卡片居中布局，视觉上聚焦表单。 - 输入框聚焦时出现蓝色边框和阴影，提升交互反馈。 - 按钮悬停有上浮和阴影效果，点击时恢复，模拟物理按压。 - 反馈区域默认隐藏，通过JavaScript动态添加类名显示成功或错误信息。 ### 第三步：添加JavaScript前端校验与交互在相同文件夹内新建文件“script.js”，写入以下JavaScript代码。这段代码在用户点击提交时，先进行客户端校验（如邮箱格式、电话格式、内容非空），校验通过后才允许表单提交到后端；同时使用fetch API实现异步提交，无需页面刷新即可显示结果。 ```javascript // 等待DOM完全加载后执行 document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('messageForm'); const feedback = document.getElementById('formFeedback'); const submitBtn = document.getElementById('submitBtn'); // 表单提交事件监听 form.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为（页面刷新） // 获取各输入字段的值并去除首尾空格 const name = document.getElementById('name').value.trim(); const email = document.getElementById('email').value.trim(); const phone = document.getElementById('phone').value.trim(); const message = document.getElementById('message').value.trim(); // 清空之前的反馈信息 feedback.className = 'feedback'; feedback.textContent = ''; // ----- 客户端校验开始 ----- // 1. 姓名不能为空 if (name === '') { showFeedback('请输入您的姓名', 'error'); return; } // 2. 邮箱不能为空，且必须符合基本格式 if (email === '') { showFeedback('请输入您的邮箱', 'error'); return; } // 简单的邮箱正则：必须包含@和点号，且点号在@之后 const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailPattern.test(email)) { showFeedback('请输入有效的邮箱地址（如 name@domain.com）', 'error'); return; } // 3. 电话如果填写了，必须为11位数字（中国大陆手机号简化校验） if (phone !== '') { const phonePattern = /^1[3-9]\d{9}$/; if (!phonePattern.test(phone)) { showFeedback('请输入有效的11位手机号码', 'error'); return; } } // 4. 留言内容不能为空 if (message === '') { showFeedback('请填写留言内容', 'error'); return; } // ----- 客户端校验结束 ----- // 禁用提交按钮，防止重复点击 submitBtn.disabled = true; submitBtn.textContent = '提交中...'; // 使用Fetch API异步提交表单数据到submit.php // 构造要发送的数据（URL编码格式） const formData = new URLSearchParams(); formData.append('name', name); formData.append('email', email); formData.append('phone', phone); formData.append('message', message); fetch('submit.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: formData.toString() }) .then(response => { // 检查HTTP响应状态 if (!response.ok) { throw new Error('服务器响应异常 (状态码: ' + response.status + ')'); } return response.text(); // 获取服务器返回的文本 }) .then(data => { // 根据服务器返回的内容判断成功或失败 if (data.trim() === 'success') { showFeedback('留言提交成功！我们会尽快与您联系。', 'success'); form.reset(); // 清空表单所有字段 } else { // 服务器返回了其他内容，可能是错误信息 showFeedback('提交失败：' + data, 'error'); } }) .catch(error => { // 网络错误或服务器无响应 showFeedback('网络错误，请稍后重试。详细信息：' + error.message, 'error'); }) .finally(() => { // 恢复提交按钮状态 submitBtn.disabled = false; submitBtn.textContent = '提交留言'; }); }); // 辅助函数：显示反馈信息 function showFeedback(message, type) { feedback.textContent = message; feedback.className = 'feedback ' + type; // 添加 success 或 error 类 } }); ``` **JavaScript核心逻辑**： - `event.preventDefault()`阻止表单默认提交，改为手动控制。 - 使用正则表达式校验邮箱和手机号格式，避免无效数据传到后端。 - 通过`fetch`发送POST请求，数据格式为`application/x-www-form-urlencoded`，与普通表单提交一致。 - 根据服务器返回的文本判断结果：返回`success`表示成功，否则显示错误信息。 - 提交按钮在请求期间禁用并显示“提交中...”，防止重复提交。 ### 第四步：创建后端PHP处理脚本在相同文件夹内新建文件“submit.php”，写入以下PHP代码。这个文件接收前端POST过来的数据，进行服务器端二次校验，然后将数据存储到文本文件中（作为演示，实际项目应使用数据库），最后返回处理结果给前端。 ```php 50) { echo 'error: 姓名长度不能超过50个字符'; exit; } // 2. 校验邮箱：非空，格式正确 if (empty($email)) { echo 'error: 邮箱不能为空'; exit; } if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { echo 'error: 邮箱格式无效'; exit; } // 3. 校验电话：如果填写了，必须为11位数字（简单校验） if (!empty($phone)) { if (!preg_match('/^1[3-9]\d{9}$/', $phone)) { echo 'error: 手机号格式无效，需为11位数字'; exit; } } // 4. 校验留言内容：非空，长度不超过500字符 if (empty($message)) { echo 'error: 留言内容不能为空'; exit; } if (mb_strlen($message) > 500) { echo 'error: 留言内容不能超过500个字符'; exit; } // ----- 数据安全处理：防止XSS攻击（对输出做转义） ----- // 注意：这里转义是为了后续存储或展示时安全，实际存储原始数据也可以，但输出时必须转义 $safe_name = htmlspecialchars($name, ENT_QUOTES, 'UTF-8'); $safe_email = htmlspecialchars($email, ENT_QUOTES, 'UTF-8'); $safe_phone = htmlspecialchars($phone, ENT_QUOTES, 'UTF-8'); $safe_message = htmlspecialchars($message, ENT_QUOTES, 'UTF-8'); // ----- 存储数据到文本文件（作为演示） ----- // 定义存储文件路径（使用__DIR__确保路径正确） $filePath = __DIR__ . '/messages.txt'; // 准备要写入的数据行：每条记录占一行，用 | 分隔字段 // 格式：时间戳 | 姓名 | 邮箱 | 电话 | 留言内容 $timestamp = date('Y-m-d H:i:s'); $dataLine = "{$timestamp}|{$safe_name}|{$safe_email}|{$safe_phone}|{$safe_message}\n"; // 以追加模式写入文件，如果文件不存在则自动创建 $result = file_put_contents($filePath, $dataLine, FILE_APPEND | LOCK_EX); // 检查写入是否成功 if ($result === false) { echo 'error: 服务器写入数据失败，请稍后重试'; exit; } // ----- 所有操作成功，返回成功标识 ----- echo 'success'; // 清空输出缓冲区并发送内容 ob_end_flush(); ?> ``` **PHP处理要点**： - 使用`filter_var`配合`FILTER_VALIDATE_EMAIL`验证邮箱，比正则更可靠。 - 使用`htmlspecialchars`转义特殊字符，防止XSS攻击，这是安全底线。 - 数据存储到`messages.txt`文件，每条记录一行，用竖线分隔字段，方便后续查看。 - 每次操作后都检查结果，失败时返回具体错误信息。 - 最后输出`success`字符串，前端JavaScript据此判断成功。 ### 第五步：测试整个提交流程 1. 启动本地PHP环境（如XAMPP控制面板启动Apache），确保服务运行正常。 2. 在浏览器地址栏输入`http://localhost/message_board/index.html`，应该看到美化后的留言表单页面。 3. 不填写任何内容直接点击“提交留言”，观察页面出现红色错误提示“请输入您的姓名”，说明前端校验生效。 4. 填写姓名“张三”、邮箱“zhangsan@test.com”、电话留空、留言内容“测试留言，这是一条测试。”，点击提交。如果一切正常，页面会显示绿色成功提示“留言提交成功！我们会尽快与您联系。”，同时表单字段被清空。 5. 打开`message_board`文件夹下的`messages.txt`文件，应该看到新增了一行记录，包含时间、姓名、邮箱、电话、留言内容。 6. 故意输入错误邮箱如“abc”，提交后会提示“请输入有效的邮箱地址”。故意输入11位手机号但开头不是1，也会被拦截。 7. 尝试直接访问`submit.php`（在浏览器输入`http://localhost/message_board/submit.php`），页面显示“error: 仅支持POST请求”，说明GET请求被正确拒绝。 ## 常见问题 **Q1：提交后页面没有任何反应，或者直接跳转到了submit.php页面显示空白？** A：最常见原因是JavaScript文件没有正确引入或代码有语法错误。打开浏览器开发者工具（F12），查看“控制台”（Console）是否有红色报错信息。检查`script.js`文件路径是否正确，以及`index.html`中`