不對,我需要將輸入框以列方式排版
时间: 2024-03-10 16:45:27 浏览: 14
好的,以下是修改过后的HTML代码,将输入框纵向排列:
```html
<!DOCTYPE html>
<html>
<head>
<title>表单簽核系统</title>
<style>
label {
display: block;
margin-bottom: 10px;
}
input, textarea {
display: block;
width: 100%;
padding: 5px;
margin-bottom: 10px;
box-sizing: border-box;
}
textarea {
height: 100px;
}
</style>
</head>
<body>
<h1>表单簽核系统</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<label for="department">部门:</label>
<input type="text" id="department" name="department">
<label for="date">日期:</label>
<input type="date" id="date" name="date">
<label for="reason">请假原因:</label>
<textarea id="reason" name="reason"></textarea>
<label for="manager">部门经理签名:</label>
<input type="text" id="manager" name="manager">
<label for="hr">人事部签名:</label>
<input type="text" id="hr" name="hr">
<input type="submit" value="提交">
</form>
</body>
</html>
```
我使用了CSS样式来控制输入框的宽度和对齐方式。同时,我也调整了<label>标签的显示方式,让每个<label>和相应的<input>或<textarea>元素在一行内,并且每个<label>和相应的<input>或<textarea>元素之间有适当的间距,让表单更加美观和易于使用。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](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)