网站留言板源代码：从零开始实现网站留言板源代码，完整教程与代码示例

来源：网络作者：日期：2025-11-10 04:48:04

在现代网站开发中，留言板是一个非常常见的功能模块，它允许用户向网站所有者或管理员提交反馈、咨询或建议，无论是个人博客、企业官网还是社区平台，留言板都能有效提升用户互动和沟通效率，本文将从零开始，详细讲解如何实现一个简单的网站留言板功能,并提供完整的源代码示例。

留言板的基本功能需求

在开始编写代码之前,我们需要明确留言板的基本功能需求：

用户输入表单：包括姓名、邮箱、留言内容等字段。
表单验证：确保用户输入的信息完整且有效。
留言提交与存储：将用户留言保存到服务器端（如数据库或文件）。
留言展示：在页面上展示已提交的留言。
安全性考虑：防止恶意提交和跨站脚本攻击（XSS）等。

实现步骤

下面我们将使用HTML、CSS和PHP语言来实现一个简单的留言板系统，PHP是一种广泛使用的服务器端脚本语言,适合处理表单提交和数据存储。

创建HTML表单页面（index.html）

我们需要一个用户输入留言的表单页面,以下是一个简单的HTML表单示例：

网站留言板源代码：从零开始实现网站留言板源代码，完整教程与代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">留言板</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; }
        input, textarea { width: 100%; padding: 8px; }
        button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <h1>留言板</h1>
        <form method="POST" action="submit.php">
            <div class="form-group">
                <label for="name">姓名：</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱：</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="message">留言内容：</label>
                <textarea id="message" name="message" rows="5" required></textarea>
            </div>
            <button type="submit">提交留言</button>
        </form>
    </div>
</body>
</html>

处理表单提交（submit.php）

我们需要一个PHP脚本来处理用户提交的留言数据，这个脚本将验证数据、存储留言,并将用户重定向到留言列表页面。

<?php
// 定义变量并初始化
$name = $email = $message = '';
$errors = [];
// 检查表单是否已提交
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取表单数据
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    // 表单验证
    if (empty($name)) {
        $errors[] = '姓名不能为空！';
    }
    if (empty($email)) {
        $errors[] = '邮箱不能为空！';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = '请输入有效的邮箱地址！';
    }
    if (empty($message)) {
        $errors[] = '留言内容不能为空！';
    }
    // 如果没有错误，保存留言到文件
    if (empty($errors)) {
        // 将留言保存到文件（这里使用txt文件存储）
        $filename = 'messages.txt';
        $entry = "姓名: $name\n邮箱: $email\n留言: $message\n\n";
        file_put_contents($filename, $entry, FILE_APPEND);
        // 重定向到留言列表页面
        header('Location: messages.php');
        exit();
    }
}
?>

显示留言列表（messages.php）

我们需要一个页面来展示所有已提交的留言,以下是一个简单的留言列表页面：

<?php
// 读取留言文件并显示
$filename = 'messages.txt';
$messages = [];
if (file_exists($filename)) {
    $messages = explode("\n\n", file_get_contents($filename));
}
// 清空文件（可选，用于重置留言）
if (isset($_GET['clear'])) {
    file_put_contents($filename, '');
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">留言列表</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .container { max-width: 800px; margin: 0 auto; padding: 20px; }
        .message { border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; }
        .clear-btn { margin-top: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>留言列表</h1>
        <?php if (!empty($messages)): ?>
            <?php foreach ($messages as $message): ?>
                <div class="message">
                    <?php
                    // 分割留言内容
                    $lines = explode("\n", $message);
                    $name = trim(array_shift($lines));
                    $email = trim(array_shift($lines));
                    $content = implode("\n", $lines);
                    ?>
                    <p><strong>姓名：</strong><?= htmlspecialchars($name) ?></p>
                    <p><strong>邮箱：</strong><?= htmlspecialchars($email) ?></p>
                    <p><strong>留言：</strong><?= htmlspecialchars($content) ?></p>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <p>暂无留言。</p>
        <?php endif; ?>
        <a href="?clear" onclick="return confirm('确定要清空所有留言吗？')">清空留言</a>
    </div>
</body>
</html>