帮我写一个HTML代码,是一个长、宽、高三个输入框
时间: 2023-12-10 22:41:43 浏览: 33
当然可以,以下是一个简单的HTML代码,可以实现长、宽、高三个输入框:
```html
<!DOCTYPE html>
<html>
<head>
<title>长宽高输入框</title>
</head>
<body>
<form>
<label for="length">长:</label>
<input type="text" id="length" name="length"><br><br>
<label for="width">宽:</label>
<input type="text" id="width" name="width"><br><br>
<label for="height">高:</label>
<input type="text" id="height" name="height"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
```
在这个HTML代码中,我们使用了三个`<input>`标签来实现长、宽、高三个输入框。每个输入框都有一个`id`和一个`name`属性,这些属性可以用来在JavaScript中访问和操作每个输入框中的值。此外,我们还使用了一个`<label>`标签来为每个输入框添加文本标签。最后,我们添加了一个提交按钮,以便用户提交输入框中的值。
相关问题
请用js 帮我写一个低代码拖拽输入框
好的,以下是一个简单的低代码拖拽输入框的实现,使用了HTML、CSS和JavaScript:
HTML代码:
```html
<div class="input-container">
<div class="input-label">输入框</div>
<div class="input-box" id="input-box" contenteditable="true"></div>
</div>
<div class="drag-handle" id="drag-handle"></div>
```
CSS代码:
```css
.input-container {
position: relative;
width: 300px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
}
.input-label {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.input-box {
width: 100%;
height: 60px;
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
overflow: auto;
}
.drag-handle {
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background-color: #ddd;
cursor: move;
}
```
JavaScript代码:
```javascript
const inputContainer = document.querySelector('.input-container');
const dragHandle = document.querySelector('.drag-handle');
let isDragging = false;
dragHandle.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
function startDrag(e) {
isDragging = true;
}
function drag(e) {
if (isDragging) {
inputContainer.style.left = e.pageX - inputContainer.offsetWidth / 2 + 'px';
inputContainer.style.top = e.pageY - inputContainer.offsetHeight / 2 + 'px';
}
}
function endDrag(e) {
isDragging = false;
}
```
这段代码实现了一个拖拽输入框的功能,包括输入框本身和一个可拖拽的手柄。当用户按下手柄并移动鼠标时,输入框会跟随鼠标移动。用户释放鼠标后,输入框会停在当前位置。输入框本身是一个可编辑的div元素,可以用来输入文本。
帮我写一个HTML打车代码
好的,以下是一个简单的HTML打车代码:
```
<!DOCTYPE html>
<html>
<head>
<title>打车</title>
</head>
<body>
<h1>打车服务</h1>
<form action="submit.php" method="post">
<label for="start">起点:</label>
<input type="text" id="start" name="start"><br><br>
<label for="destination">目的地:</label>
<input type="text" id="destination" name="destination"><br><br>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="格式:xxx-xxx-xxxx"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
```
在这个代码中,我们使用了一个简单的表单,包含了以下几个字段:
- 起点(输入框)
- 目的地(输入框)
- 姓名(输入框)
- 电话(输入框,需要满足特定的格式)
- 提交按钮
当用户填写完表单并点击提交按钮后,表单数据会被提交到服务器上的submit.php文件进行处理。你需要根据自己的需求修改submit.php文件的内容,来实现打车服务的具体功能。
相关推荐
![](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)
![](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)