网页登录注册页面代码

新星源码网 1年前 9 0

以下是一个简单的网页登录注册页面的HTML和CSS代码示例：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Login/Register Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div class="form-container">
            <div class="form-btn">
                <button id="login-btn">Login</button>
                <button id="register-btn">Register</button>
            </div>
            <form id="login-form">
                <h2>Login</h2>
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
                <button type="submit">Login</button>
            </form>
            <form id="register-form">
                <h2>Register</h2>
                <label for="new-username">Username:</label>
                <input type="text" id="new-username" name="new-username" required>
                <label for="new-password">Password:</label>
                <input type="password" id="new-password" name="new-password" required>
                <label for="confirm-password">Confirm Password:</label>
                <input type="password" id="confirm-password" name="confirm-password" required>
                <button type="submit">Register</button>
            </form>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f2f2f2;
    font-family: Arial, sans-serif;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.form-btn {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#login-btn, #register-btn {
    background-color: #4CAF50;
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin: 0 10px;
    border-radius: 5px;
    cursor: pointer;
}

#login-btn:hover, #register-btn:hover {
    background-color: #3e8e41;
}

form {
    display: none;
}

form h2 {
    margin-bottom: 10px;
}

form label {
    display: block;
    margin-bottom: 5px;
}

form input {
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
}

form button {
    background-color: #4CAF50;
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin-top: 10px;
    border-radius: 5px;
    cursor: pointer;
}

form button:hover {
    background-color: #3e8e41;
}

.show {
    display: block;
}

JavaScript代码：

const loginBtn = document.getElementById('login-btn');
const registerBtn = document.getElementById('register-btn');
const loginForm = document.getElementById('login-form');
const registerForm = document.getElementById('register-form');

loginBtn.addEventListener('click', () => {
    loginForm.classList.add('show');
    registerForm.classList.remove('show');
});

registerBtn.addEventListener('click', () => {
    registerForm.classList.add('show');
    loginForm.classList.remove('show');
});

loginForm.addEventListener('submit', (e) => {
    e.preventDefault();
    // 登录逻辑
});

registerForm.addEventListener('submit', (e) => {
    e.preventDefault();
    // 注册逻辑
});

这个示例包含了一个登录和注册表单，以及两个按钮用于切换表单。CSS样式用于美化表单和按钮，JavaScript代码用于处理表单提交和切换表单。注意，这只是一个简单的示例，实际的登录注册页面可能需要更复杂的逻辑和更多的表单字段。

Related

热门文章