|
发表于 2024-5-7 23:01:50
|
显示全部楼层
当然可以!下面是一个完整的登录界面(附带注册功能)的示例代码,使用了HTML、CSS、JavaScript和PHP:
index.html:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>登录界面</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="container">
- <h2>用户登录</h2>
- <form id="loginForm">
- <div class="inputBox">
- <label for="username">用户名:</label>
- <input type="text" id="username" required>
- </div>
- <div class="inputBox">
- <label for="password">密码:</label>
- <input type="password" id="password" required>
- </div>
- <div class="inputBox">
- <label for="captcha">验证码:</label>
- <input type="text" id="captcha" required>
- <img id="captchaImage" src="captcha.php" onclick="refreshCaptcha()" alt="点击刷新">
- </div>
- <div class="inputBox">
- <input type="submit" value="登录">
- </div>
- <div class="inputBox">
- 还没有账号?<a href="register.html">点击注册</a>
- </div>
- </form>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
复制代码
register.html:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>注册界面</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="container">
- <h2>注册新账号</h2>
- <form id="registerForm" method="post" action="register.php">
- <div class="inputBox">
- <label for="username">用户名:</label>
- <input type="text" id="username" name="username" required>
- </div>
- <div class="inputBox">
- <label for="password">密码:</label>
- <input type="password" id="password" name="password" required>
- </div>
- <div class="inputBox">
- <label for="confirmPassword">确认密码:</label>
- <input type="password" id="confirmPassword" name="confirmPassword" required>
- </div>
- <div class="inputBox">
- <label for="email">邮箱:</label>
- <input type="email" id="email" name="email" required>
- </div>
- <div class="inputBox">
- <input type="submit" value="注册">
- </div>
- <div class="inputBox">
- 已有账号?<a href="index.html">点击登录</a>
- </div>
- </form>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
复制代码
style.css:
- @import url('https://fonts.googleapis.com/css?family=Roboto');
- body {
- font-family: 'Roboto', sans-serif;
- background-color: #f2f2f2;
- }
- .container {
- width: 300px;
- margin: 0 auto;
- padding: 20px;
- background-color: #fff;
- border-radius: 5px;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
- }
- h2 {
- text-align: center;
- color: #333;
- }
- .inputBox {
- margin-bottom: 15px;
- }
- label {
- display: inline-block;
- width: 80px;
- color: #555;
- }
- input,
- input {
- width: 200px;
- padding: 8px;
- border: 1px solid #ccc;
- border-radius: 3px;
- transition: border-color 0.3s ease;
- }
- input:focus,
- input:focus {
- border-color: #4CAF50;
- }
- #captchaImage {
- height: 30px;
- margin-left: 10px;
- cursor: pointer;
- }
- input {
- transform: scale(1.3);
- }
- input {
- width: 100%;
- padding: 12px;
- background-color: #4CAF50;
- color: #fff;
- border: none;
- border-radius: 3px;
- cursor: pointer;
- transition: background-color 0.3s ease;
- }
- input:hover {
- background-color: #45a049;
- }
复制代码
script.js:
- function refreshCaptcha() {
- var captchaImage = document.getElementById("captchaImage");
- captchaImage.src = "captcha.php?rand=" + Math.random();
- }
- var loginForm = document.getElementById("loginForm");
- loginForm.addEventListener("submit", function(e) {
- e.preventDefault();
- var username = document.getElementById("username").value;
- var password = document.getElementById("password").value;
- var captcha = document.getElementById("captcha").value;
- // 在这里进行用户名、密码和验证码的验证逻辑
- // ...
- // 登录成功后跳转到登录后的页面
- window.location.href = "logged_in.html";
- });
- var registerForm = document.getElementById("registerForm");
- registerForm.addEventListener("submit", function(e) {
- e.preventDefault();
- var username = document.getElementById("username").value;
- var password = document.getElementById("password").value;
- var confirmPassword = document.getElementById("confirmPassword").value;
- var email = document.getElementById("email").value;
- // 在这里进行注册信息的验证和存储逻辑
- // ...
-
- // 注册成功后跳转到登录界面
- window.location.href = "index.html";
- });
复制代码
register.php:
- <?php
- // 获取POST过来的表单数据
- $username = $_POST['username'];
- $password = $_POST['password'];
- $confirmPassword = $_POST['confirmPassword'];
- $email = $_POST['email'];
- // 在这里进行表单验证逻辑
- // ...
- // 连接到数据库
- $servername = "localhost";
- $dbname = "your_database_name";
- $db_username = "your_username";
- $db_password = "your_password";
- $conn = new mysqli($servername, $db_username, $db_password, $dbname);
- if ($conn->connect_error) {
- die("数据库连接失败:" . $conn->connect_error);
- }
- // 将注册信息插入数据库
- $sql = "INSERT INTO users (username, password, email) VALUES ('$username', '$password', '$email')";
- if ($conn->query($sql) === true) {
- echo "注册成功";
- } else {
- echo "注册失败:" . $conn->error;
- }
- $conn->close();
- ?>
复制代码
请根据你的实际数据库配置,将数据库名、用户名和密码替换为正确的值,并确保数据库中有名为`users`的表,包含字段`username`、`password`和`email`。
这个示例中的登录逻辑仅用于前端演示,实际开发中需要进行更严格的验证和安全性措施,如密码加密。在实际项目中,建议使用框架或库来处理用户认证和数据库操作。
以上回复来自 FishC AI 小助理,如未能正确解答您的问题,请继续追问。 |
|