当前位置：首页 > 前端开发 > 正文

如何高效编写HTML实现一个简洁实用的登录页面设计？

admin
前端开发
2025-09-19
6

在HTML中创建一个登录页面,你需要结合HTML标签、CSS样式以及可能的JavaScript脚本，以下是一个基本的登录页面示例，包括用户名和密码输入框、登录按钮以及一些基本的样式。

如何高效编写HTML实现一个简洁实用的登录页面设计？第1张

HTML结构

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0">Login Page</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="logincontainer"> <form id="loginForm"> <h2>Login</h2> <div class="formgroup"> <label for="username">Username:</label> <input type="text" id="username" name="username" required> </div> <div class="formgroup"> <label for="password">Password:</label> <input type="password" id="password" name="password" required> </div> <div class="formgroup"> <button type="submit">Login</button> </div> </form> </div> <script src="script.js"></script> </body> </html>

CSS样式（styles.css）

body { fontfamily: Arial, sansserif; backgroundcolor: #f4f4f4; margin: 0; padding: 0; display: flex; justifycontent: center; alignitems: center; height: 100vh; } .logincontainer { backgroundcolor: #fff; padding: 20px; borderradius: 5px; boxshadow: 0 0 10px rgba(0, 0, 0, 0.1); } form { display: flex; flexdirection: column; } .formgroup { marginbottom: 15px; } label { display: block; marginbottom: 5px; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ddd; borderradius: 5px; } button { padding: 10px; border: none; borderradius: 5px; backgroundcolor: #5cb85c; color: white; cursor: pointer; } button:hover { backgroundcolor: #4cae4c; }

JavaScript脚本（script.js）

document.getElementById('loginForm').addEventListener('submit', function(event) { event.preventDefault(); var username = document.getElementById('username').value; var password = document.getElementById('password').value; // 这里可以添加验证逻辑，例如发送请求到服务器 console.log('Username:', username); console.log('Password:', password); // 假设验证成功 alert('Login successful!'); });