用html/css/js生成登录代码
时间: 2023-12-21 21:07:37 浏览: 28
可以使用以下代码来生成登录界面:
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="submit" value="登录">
</form>
```
CSS代码:
```
form {
text-align: center;
}
label {
display: inline-block;
width: 100px;
text-align: left;
}
input[type=text], input[type=password] {
padding: 8px;
border: solid 1px #ccc;
border-radius: 4px;
box-sizing: border-box;
width: 250px;
margin-bottom: 15px;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
```
JavaScript代码:
```
// 获取表单元素
const form = document.getElementsByTagName('form')[0];
const username = document.getElementById('username');
const password = document.getElementById('password');
// 提交表单时验证用户名和密码是否为空
form.addEventListener('submit', (event) => {
if (username.value === '' || password.value === '') {
alert('请输入用户名和密码');
event.preventDefault();
}
});
```
以上代码只是一个简单的登录界面示例,实际使用时需要根据需求进行修改和完善。