使用js生成一个美观的登录页面,兼容手机,表单要求机构号,用户名,密码,且要求这三个表单字段在一行
时间: 2023-02-24 16:23:02 浏览: 70
下面是使用 JavaScript 生成美观的登录页面的代码示例:
```
<!DOCTYPE html>
<html>
<head>
<style>
.form-group {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin: 20px 0;
}
input[type="text"],
input[type="password"] {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 10px;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<div class="form-group">
<label for="institute">机构号:</label>
<input type="text" id="institute" name="institute">
</div>
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
</div>
<div class="form-group">
<input type="submit" value="登录">
</div>
</form>
</body>
</html>
```
这段代码使用了 CSS 的 `flex` 布局来让表单字段在一行显示,并使用了简单的样式来美化表单。