写一个html 登录页面
时间: 2023-09-20 13:05:48 浏览: 90
### 回答1:
<html>
<head>
<title>登录页面</title>
</head>
<body>
<h1>登录</h1>
<form action="login.php" method="post">
<label for="username">用户名</label>
<input type="text" name="username" id="username">
<br>
<label for="password">密码</label>
<input type="password" name="password" id="password">
<br>
<input type="submit" value="登录">
</form>
</body>
</html>
### 回答2:
<HTML>
<HEAD>
<TITLE>登录页面</TITLE>
<STYLE>
/* 样式部分 */
body {
background-color: #F3F3F3;
font-family: Arial, sans-serif;
}
.container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
}
h1{
text-align: center;
color: #333333;
}
label {
display: block;
margin-top: 10px;
color: #666666;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 5px;
font-size: 14px;
border: 1px solid #CCCCCC;
}
input[type="submit"] {
width: 100%;
padding: 10px;
font-size: 16px;
color: #FFFFFF;
background-color: #333333;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #555555;
}
</STYLE>
</HEAD>
<BODY>
<DIV class="container">
<H1>用户登录</H1>
<FORM>
<LABEL for="username">用户名:</LABEL>
<INPUT type="text" id="username" placeholder="请输入用户名">
<LABEL for="password">密码:</LABEL>
<INPUT type="password" id="password" placeholder="请输入密码">
<INPUT type="submit" value="登录">
</FORM>
</DIV>
</BODY>
</HTML>
### 回答3:
<html>
<head>
<title>登录页面</title>
</head>
<body>
<h2>用户登录</h2>
<form action="login.php" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="登录">
</form>
</body>
</html>
以上是一个简单的登录页面的HTML代码。页面上包含一个标题"用户登录",一个表单用于用户输入用户名和密码,并有一个登录按钮。用户名和密码分别由用户名输入框(input type="text")和密码输入框(input type="password")实现。input标签中的name属性用于在后台处理表单数据时识别用户名和密码的字段名。表单数据在提交时会发送到"login.php"这个指定的后台处理文件。所有的输入框都使用了required属性,这样在用户未输入内容时无法提交表单。
需要注意的是,这只是一个简单的前端页面,提交的用户数据还需要在后台通过PHP或其他方式进行验证和处理。
阅读全文