首页 公司动态

网页表单提交代码编写｜留言页面完整源码实操

发布时间：2026-07-19 12:38

# 网页表单提交代码编写｜留言页面完整源码实操

## 前言介绍

网页表单是用户与网站交互最基础的方式，无论是注册登录、提交留言还是填写问卷，背后都依赖一套完整的前后端协作机制。很多初学者在写表单时，要么只做了前端样式，提交后数据丢失；要么后端代码写死，无法处理真实用户输入。本教程将带你从零构建一个完整的留言页面，包含前端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

// 设置响应头，告知浏览器返回纯文本内容，编码UTF-8

header('Content-Type: text/plain; charset=utf-8');

// 开启输出缓冲区，确保没有意外输出干扰

ob_start();

// ----- 服务器端校验 -----

// 检查请求方法是否为POST

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {

echo 'error: 仅支持POST请求';

exit;

}

// 获取POST数据，并做基本清理（去除首尾空格）

$name = isset($_POST['name']) ? trim($_POST['name']) : '';

$email = isset($_POST['email']) ? trim($_POST['email']) : '';

$phone = isset($_POST['phone']) ? trim($_POST['phone']) : '';

$message = isset($_POST['message']) ? trim($_POST['message']) : '';

// 1. 校验姓名：非空，长度不超过50字符

if (empty($name)) {

echo 'error: 姓名不能为空';

exit;

}

if (mb_strlen($name) > 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`中`