html--登录注册页面

以下是一个简单的HTML登录注册页面示例：




<!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>
        <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>
        // 登录表单提交处理
        document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            // 这里可以添加登录验证逻辑
            console.log('Login form submitted');
        });
 
        // 注册表单提交处理
        document.getElementById('registerForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            // 这里可以添加注册逻辑
            console.log('Register form submitted');
        });
    </script>
</body>
</html>

这个示例包括了一个登录表单和一个注册表单，并使用JavaScript为每个表单添加了提交事件监听器，以防止默认的表单提交行为并添加自定义逻辑（例如验证和数据处理）。这是一个简单的起点，您可以根据需要添加更多功能，例如输入验证、错误处理和与服务器的交互。

html--登录注册页面

评论已关闭

推荐阅读