<!DOCTYPE html> <html> <head> <title>登陆页面</title> <style> body{ background-color: #FF4F4; } .login{ margin: 100px auto; border: 1px solid #ccc; width: 400px; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px #ccc; } input[type=text], input[type=password]{ width: 100%; padding: 10px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; border-radius: 5px; } button[type=submit]{ background-color: #4CAF50; color: white; padding: 10px 18px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } button[type=submit]:hover{ background-color: #45a049; } .error{ color: red; } </style> </head> <body> <div class="login"> <h2>登陆页面</h2> <form action="process.php" method="POST"> <label for="username">用户名</label> <input type="text" id="username" name="username" placeholder="请输入用户名"> <label for="password">密码</label> <input type="password" id="password" name="password" placeholder="请输入密码"> <button type="submit">登陆</button> <a href="register.php">还没有账号?点此处注册</a> <?php if(isset($_GET['error'])){ if($_GET['error'] == 'empty'){ echo "<p class='error'>请输入所有字段!</p>"; } elseif ($_GET['error'] == 'wrong') { echo "<p class='error'>请输入正确的用户名和密码!</p>"; } } ?> </form> </div> </body> </html>
时间: 2023-06-07 16:09:00 浏览: 153
动态网页爱心源码,支持修改文字和音乐
白色; } </style> </head> <body> <form action="login.php" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username"> <br> <label for="password">密码:</label> <input type="password" id="password" name="password"> <br> <input type="submit" value="登陆"> </form> </body> </html>
以上是一个简单的登陆页面的HTML代码,使用了form表单元素,其中包括用户名和密码的输入框以及提交按钮。通过这个表单,可以将用户输入的用户名和密码信息传递给login.php文件进行验证和处理。页面的背景颜色为白色。
阅读全文