写一个用户登录的HTML页面
时间: 2023-12-19 13:07:14 浏览: 22
<!DOCTYPE html>
<html>
<head>
<title>User Login</title>
<meta charset="utf-8">
</head>
<body>
<h1>User Login</h1>
<form action="login.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
这个是一个简单的用户登录页面,其中包含了输入用户名和密码的表单,以及一个提交按钮。在表单中,使用了POST方法将数据提交到login.php页面进行处理。
相关问题
用html写一个用户登录的页面
好的,以下是一个简单的用户登录页面的 HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
</head>
<body>
<h1>用户登录</h1>
<form action="login.php" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="登录">
</form>
</body>
</html>
```
请注意,这只是一个基本的登录页面,实际应用中需要更多的安全措施和验证机制来保护用户的账户安全。
html+js 写一个用户登录页面
好的,下面是一个简单的用户登录页面的 HTML 和 JavaScript 代码:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>User Login</title>
</head>
<body>
<h1>User Login</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="button" onclick="login()">Login</button>
</form>
<p id="message"></p>
<script src="login.js"></script>
</body>
</html>
```
JavaScript 代码:
```
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "" || password == "") {
document.getElementById("message").innerHTML = "Please enter both username and password!";
} else if (username == "admin" && password == "admin123") {
document.getElementById("message").innerHTML = "Login successful!";
} else {
document.getElementById("message").innerHTML = "Invalid username or password!";
}
}
```
该页面包含一个简单的登录表单,在用户填写完用户名和密码后,点击“Login”按钮即可触发 JavaScript 中的 login() 函数。该函数会获取输入框中的值,并判断是否为空或者是否正确,然后在页面上显示相应的消息。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)