生产一个简易的登录html
时间: 2023-07-29 17:13:34 浏览: 38
好的,请看以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录</title>
</head>
<body>
<form action="login.php" method="post">
<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>
</body>
</html>
```
这是一个最基本的登录界面,包含一个表单,包括用户名和密码两个输入框,以及一个提交按钮。其中,`action` 属性值为 `login.php`,表示将表单提交到 `login.php` 文件进行处理。你可以根据需要修改表单的 `action` 属性值,以便将表单提交到正确的处理程序。
相关问题
帮我生产一个简易的登录页面
好的,以下是一个简易的登录页面的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h2>Login</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="submit" value="Login">
</form>
</body>
</html>
```
这个页面包括一个表单,其中有两个输入框(用户名和密码),以及一个提交按钮。当用户点击提交按钮时,表单会将输入的用户名和密码发送到服务器以进行验证。注意,这个页面只是一个前端页面,它并没有实现任何后端逻辑来验证用户输入的信息。
js制作一个简易计算器
好的,下面是一个简单的HTML/CSS/JavaScript计算器示例:
HTML:
```html
<div class="calculator">
<input type="text" class="display" disabled>
<div class="keys">
<button class="operator" value="+">+</button>
<button class="operator" value="-">-</button>
<button class="operator" value="*">×</button>
<button class="operator" value="/">÷</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="0">0</button>
<button value=".">.</button>
<button class="clear" value="clear">C</button>
<button class="calculate" value="=">=</button>
</div>
</div>
```
CSS:
```css
.calculator {
width: 200px;
margin: 0 auto;
padding: 20px;
background-color: #f1f1f1;
border-radius: 10px;
text-align: center;
}
.display {
width: 100%;
height: 50px;
font-size: 24px;
text-align: right;
margin-bottom: 10px;
padding: 5px;
}
.keys button {
width: 50px;
height: 50px;
margin: 5px;
font-size: 24px;
border: none;
border-radius: 5px;
background-color: #e0e0e0;
cursor: pointer;
outline: none;
}
.keys button:hover {
background-color: #d0d0d0;
}
.keys button.operator {
background-color: #f0a0a0;
color: white;
}
.keys button.operator:hover {
background-color: #e08080;
}
.keys button.clear {
background-color: #c0c0c0;
}
.keys button.clear:hover {
background-color: #b0b0b0;
}
.keys button.calculate {
background-color: #70c0a0;
color: white;
}
.keys button.calculate:hover {
background-color: #50b080;
}
```
JavaScript:
```javascript
const display = document.querySelector('.display');
const keys = document.querySelector('.keys');
const operators = ['+', '-', '*', '/'];
keys.addEventListener('click', event => {
if (event.target.matches('button')) {
const key = event.target;
const action = key.value;
const keyContent = key.textContent;
const displayValue = display.value;
if (!action) {
if (displayValue === '0') {
display.value = keyContent;
} else {
display.value += keyContent;
}
} else if (operators.includes(action)) {
const lastChar = displayValue[displayValue.length - 1];
if (lastChar && !operators.includes(lastChar)) {
display.value += action;
}
} else if (action === '.') {
const lastNumber = displayValue.split(/[-+*/]/).pop();
if (!lastNumber.includes('.')) {
display.value += action;
}
} else if (action === 'clear') {
display.value = '0';
} else if (action === '=') {
const expression = displayValue;
const result = eval(expression);
display.value = result;
}
}
});
```
这是一个基本的计算器,可以进行加、减、乘、除、小数点和清除操作。注意,这是一个演示示例,使用 `eval()` 函数进行计算,实际上在生产环境中,应该避免直接使用 `eval()` 函数,因为它可能存在安全问题。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)