HTML 中创建一个登录表单,其中包含用户名和密码两个输入框,当用户点击提交按钮时,可以使用 JavaScript 来检查用户名和密码是否正确,用户通过输入正确的用户名和密码进行登录成功,正确的用户名为“admin”,密码为“a1234567”,否则提示用户名密码错误。
时间: 2024-02-12 20:04:21 浏览: 34
好的,以下是创建登录表单并检查用户名和密码的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<script>
function checkLogin() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "admin" && password == "a1234567") {
alert("Login Successful!");
} else {
alert("Incorrect Username or Password!");
}
}
</script>
</head>
<body>
<h2>Login Form</h2>
<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>
<input type="button" value="Submit" onclick="checkLogin()">
</form>
</body>
</html>
```
这个例子中,我们使用了 HTML 来创建一个表单,包含了用户名和密码两个输入框,以及一个提交按钮。当用户点击提交按钮时,checkLogin() 函数会被调用,该函数会获取用户名和密码的值,并使用 if 语句来检查它们是否正确。如果用户名和密码正确,就会弹出一个消息框提示登录成功,否则会提示用户名密码错误。
相关推荐
![html](https://img-home.csdnimg.cn/images/20210720083451.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)