用HTML布置一个登记客户投诉输入的页面,要有客户的公司名字,投诉人,投诉人部门,问题分类,投诉内容描叙并支持投诉图片显示,样式用Bookstrap的。
时间: 2023-05-24 11:03:28 浏览: 284
以下是一个基本的HTML布置一个登记客户投诉输入的页面的例子,使用Bootstrap样式。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>客户投诉登记表单</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h1 class="text-center mb-5">客户投诉登记表单</h1>
<form>
<div class="form-group">
<label for="company-name">公司名称</label>
<input type="text" class="form-control" id="company-name" placeholder="请输入公司名称">
</div>
<div class="form-group">
<label for="complainant">投诉人</label>
<input type="text" class="form-control" id="complainant" placeholder="请输入投诉人的姓名">
</div>
<div class="form-group">
<label for="complainant-department">投诉人部门</label>
<input type="text" class="form-control" id="complainant-department" placeholder="请输入投诉人所在部门">
</div>
<div class="form-group">
<label for="complaint-category">问题分类</label>
<select class="form-control" id="complaint-category">
<option value="">请选择问题分类</option>
<option value="1">产品质量问题</option>
<option value="2">服务态度问题</option>
<option value="3">交付时间问题</option>
<option value="4">其他</option>
</select>
</div>
<div class="form-group">
<label for="complaint-description">投诉内容描述</label>
<textarea class="form-control" id="complaint-description" rows="3"></textarea>
</div>
<div class="form-group">
<label for="complaint-image">投诉图片</label>
<input type="file" class="form-control-file" id="complaint-image">
</div>
<button type="submit" class="btn btn-primary">提交投诉</button>
</form>
</div>
</div>
</div>
<!-- 引入jQuery和Bootstrap JS -->
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
```
上述代码使用了Bootstrap的网格系统将表单居中,并使用了表单控件(form-control)的样式,同时为输入框添加了placeholder提示文字,为下拉框添加了option选项,为提交按钮添加了样式等。在样式中,使用了多个Bootstrap的预置类,如btn和btn-primary等。
同时,在表单中增加了对图片上传的支持,使用了input type="file"这个表单控件。用户可以通过选择文件来上传投诉图片。注意,由于图片通常需要服务器端的存储和处理,此处并没有提供完整的图片上传功能,只是简单地展示了如何支持图片上传。
最后,在代码的底部引入了jQuery和Bootstrap的JavaScript文件,以支持Bootstrap所使用的JavaScript功能,如表单验证、下拉框提示等。
阅读全文