制作一个登录表单,输入账号和密码。如果账号与密码相同,则显示“登录成功”,否则显示“登录失败”。
时间: 2024-05-01 07:18:18 浏览: 18
好的,这个问题可以通过HTML、CSS和JavaScript来实现。我可以为您提供以下代码示例,您可以在自己的网页中使用它们:
HTML代码:
```html
<form">
<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="button" value="登录" onclick="login()">
</form>
<div id="result"></div>
```
CSS代码:
```css
form {
margin: auto;
width: 50%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: inline-block;
width: 100px;
text-align: right;
}
input[type=text],
input[type=password] {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type=button] {
margin-left: 105px;
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
input[type=button]:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
font-size: 18px;
}
```
JavaScript代码:
```js
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === password) {
document.getElementById("result").innerHTML = "登录成功";
} else {
document.getElementById("result").innerHTML = "登录失败";
}
}
```
当用户填写完账号和密码后,点击“登录”按钮,将会调用login()函数。该函数获取用户名和密码的值,并对它们进行比较。如果它们相同,则在页面上显示“登录成功”,否则显示“登录失败”。希望这个示例可以帮到您!