web前端登陆注册界面（html+css+js）

这篇文章距离上次修改已过453天，其中的内容可能已经有所变动。

以下是一个简单的Web前端登录注册界面的示例代码，包括HTML、CSS和JavaScript。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Register Form</title>
<style>
    body { font-family: Arial, sans-serif; }
    .form-container { max-width: 300px; margin: 50px auto; }
    form { display: flex; flex-direction: column; }
    form label { margin-bottom: 10px; }
    form input[type="text"], form input[type="password"] { margin-bottom: 10px; }
    form button { margin-top: 10px; }
</style>
</head>
<body>
 
<div class="form-container">
    <h2>Login</h2>
    <form id="loginForm">
        <label for="loginUsername">Username:</label>
        <input type="text" id="loginUsername" required>
        <label for="loginPassword">Password:</label>
        <input type="password" id="loginPassword" required>
        <button type="submit">Login</button>
    </form>
</div>
 
<div class="form-container">
    <h2>Register</h2>
    <form id="registerForm">
        <label for="registerUsername">Username:</label>
        <input type="text" id="registerUsername" required>
        <label for="registerEmail">Email:</label>
        <input type="text" id="registerEmail" required>
        <label for="registerPassword">Password:</label>
        <input type="password" id="registerPassword" required>
        <button type="submit">Register</button>
    </form>
</div>
 
<script>
    // Login form submission handler
    document.getElementById('loginForm').addEventListener('submit', function(event) {
        event.preventDefault();
        var username = document.getElementById('loginUsername').value;
        var password = document.getElementById('loginPassword').value;
        // Here, you would send the login data to the server for verification
        console.log('Login submitted:', username, password);
    });
 
    // Register form submission handler
    document.getElementById('registerForm').addEventListener('submit', function(event) {
        event.preventDefault();
        var username = document.getElementById('registerUsername').value;
        var ema

web前端登陆注册界面（html+css+js）

评论已关闭

推荐阅读