做一个登陆表单,如果登录成功(假如用户名为“zs”,密码为“123”是正确的账户和密码), 则通过cookie记录存储的账户和密码;下次打开,直接即可显示出账户和密码 提示:cookie的存储: "userpwd=zs-123", 获取cookie时,拆用户名和密码-->
时间: 2024-03-03 10:48:58 浏览: 60
使用Cookie记录用户名和密码.
好的,这是一个简单的登陆表单,使用HTML和JavaScript实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Form</title>
<script>
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "zs" && password == "123") {
document.cookie = "userpwd=" + username + "-" + password;
alert("Login successful!");
} else {
alert("Incorrect username or password!");
}
}
</script>
</head>
<body>
<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="Login" onclick="login()">
</form>
</body>
</html>
```
当用户点击“Login”按钮时,`login()`函数会被调用。该函数会获取输入框中的用户名和密码,如果用户名和密码正确,则将它们存储到cookie中,格式为“userpwd=用户名-密码”。如果用户名或密码不正确,则会弹出一个警告框。
下次打开页面时,可以读取cookie并自动填充用户名和密码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Form</title>
<script>
function getCookie(name) {
var cookies = document.cookie.split("; ");
for (var i = 0; i < cookies.length; i++) {
var parts = cookies[i].split("=");
if (parts[0] == name) {
return parts[1].split("-");
}
}
return null;
}
window.onload = function() {
var userpwd = getCookie("userpwd");
if (userpwd != null) {
document.getElementById("username").value = userpwd[0];
document.getElementById("password").value = userpwd[1];
}
}
</script>
</head>
<body>
<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="Login" onclick="login()">
</form>
</body>
</html>
```
`getCookie()`函数用于获取名为“userpwd”的cookie,并将其拆分成用户名和密码。如果cookie不存在,则返回null。在页面加载完成后,`window.onload`事件会被触发,将用户名和密码填充到相应的输入框中。
阅读全文