使用 PHP、CSS 创建注册页和登录

滔滔

下面是一个简单的示例，使用 PHP 和 CSS 创建注册页和登录页：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>注册</h1>
        <form action="register_process.php" method="POST">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" required>

            <label for="email">邮箱</label>
            <input type="email" id="email" name="email" required>

            <label for="password">密码</label>
            <input type="password" id="password" name="password" required>

            <label for="confirmPassword">确认密码</label>
            <input type="password" id="confirmPassword" name="confirmPassword" required>

            <button type="submit">注册</button>
        </form>
        <p>已有账号？<a href="login.php">点击登录</a></p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>登录</h1>
        <form action="login_process.php" method="POST">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" required>

            <label for="password">密码</label>
            <input type="password" id="password" name="password" required>

            <button type="submit">登录</button>
        </form>
        <p>没有账号？<a href="register.php">点击注册</a></p>
    </div>
</body>
</html>

style.css

body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 400px;
    width: 100%;
}

h1 {
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-top: 10px;
}

input {
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 3px;
}

button {
    padding: 10px;
    margin-top: 20px;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background-color: #2980b9;
}

p {
    text-align: center;
    margin-top: 15px;
}

p a {
    color: #3498db;
    text-decoration: none;
}

register_process.php

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST["username"];
    $email = $_POST["email"];
    $password = $_POST["password"];
    $confirmPassword = $_POST["confirmPassword"];

    // 进行注册逻辑，比如将用户信息保存到数据库

    // 重定向到登录页面
    header("Location: login.php");
    exit();
}
?>

login_process.php:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST["username"];
    $password = $_POST["password"];

    // 进行登录验证逻辑，比如检查数据库中是否有匹配的用户信息

    // 如果验证成功，可以设置用户登录状态，然后重定向到用户管理页面
    // header("Location: user_management.php");
    // exit();

    // 为了示例，暂时直接重定向回登录页面
    header("Location: login.php");
    exit();
}
?>

在这个示例中，我们使用 PHP、CSS 和 JavaScript 创建了一个简单的注册页和登录页。注册页 register.php 包含一个表单，用户可以输入用户名、邮箱、密码和确认密码，点击 “注册” 按钮后，数据将通过 POST 请求传递到 register_process.php 进行处理。登录页 login.php 包含一个表单，用户可以输入用户名和密码，点击 “登录” 按钮后，数据将通过 POST 请求传递到 login_process.php 进行处理。

你可以根据自己的需求自定义样式和添加逻辑代码来实现更多的功能，例如将用户信息保存到数据库、密码加密、用户验证等。

请注意，这只是一个简单的示例，实际项目中需要更多的安全性和功能来处理用户注册和登录。同时，你也需要建立数据库来保存用户信息和进行用户验证。