首页＜HTML＞简单登录页面代码

＜HTML＞简单登录页面代码

时间: 2024-09-07 10:02:02 浏览: 42

一个简单的HTML登录页面通常包含基本的表单元素，用于收集用户的用户名和密码。下面是一个基础示例，展示了如何创建一个简单的登录页面： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>简单登录页面</title> <style> body { font-family: Arial, sans-serif; } .login-container { width: 300px; margin: 100px auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .form-input { margin-bottom: 10px; } .form-input label { display: block; margin-bottom: 5px; } .form-input input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } .form-input input[type="submit"] { background-color: #5cb85c; color: white; cursor: pointer; } .form-input input[type="submit"]:hover { background-color: #4cae4c; } </style> </head> <body> <div class="login-container"> <h2>登录</h2> <form action="/login" method="post"> <div class="form-input"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> </div> <div class="form-input"> <label for="password">密码:</label> <input type="password" id="password" name="password" required> </div> <div class="form-input"> <input type="submit" value="登录"> </div> </form> </div> </body> </html> ``` 这段代码中，我们创建了一个登录表单，包含用户名和密码输入框以及提交按钮。表单使用`POST`方法提交到服务器的`/login`路径。样式部分使用了内联CSS来美化页面，但这可以根据实际需求添加到单独的样式表中。

阅读全文