首页写一个登录界面html

写一个登录界面html

时间: 2023-10-16 15:33:02 浏览: 43

登录界面.html

以下是一个简单的登录界面HTML代码： ``` <!DOCTYPE html> <html> <head> <title>Login Form</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: #F7F7F7; font-family: Arial, sans-serif; } h2 { color: #333; text-align: center; margin-top: 50px; } form { background-color: #FFF; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-width: 400px; margin: 50px auto; } label { display: block; margin-bottom: 8px; color: #333; } input[type="text"], input[type="password"] { padding: 10px; border-radius: 5px; border: none; width: 100%; margin-bottom: 20px; box-sizing: border-box; } input[type="submit"] { background-color: #4CAF50; color: #FFF; padding: 10px; border-radius: 5px; border: none; width: 100%; cursor: pointer; } input[type="submit"]:hover { background-color: #3E8E41; } </style> </head> <body> <h2>Login Form</h2> <form action="#" method="post"> <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> <input type="submit" value="Login"> </form> </body> </html> ``` 该代码包含一个标题，一个表单和两个输入框（一个用于输入用户名，另一个用于输入密码），以及一个提交按钮。用户在输入框中输入用户名和密码，然后点击提交按钮，该表单将发送到服务器以进行处理。

阅读全文