html 写一个 登录页面
时间: 2023-12-26 08:58:23 浏览: 24
以下是一个简单的 HTML 登录页面的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<style>
/* 居中登录表单 */
form {
margin: auto;
width: 50%;
border: 3px solid #f1f1f1;
padding: 10px;
}
/* 调整输入框和按钮样式 */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: dodgerblue;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* 鼠标经过按钮样式 */
button:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<form action="/login" method="post">
<h2>Login Form</h2>
<label for="username"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="username" required>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit">Login</button>
</form>
</body>
</html>
```
该页面包含一个登录表单,其中包括用户名和密码输入框以及一个登录按钮。输入框和按钮都有一些基本样式,使其看起来比较漂亮。当用户点击登录按钮时,表单将提交到服务器的“/login”端点。