請你幫我完成HTML代碼
时间: 2024-03-20 19:41:50 浏览: 12
好的,以下是一个简单的 HTML 页面,满足您的需求:
`index.html` 页面:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据登记</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>数据登记</h1>
<form action="/register" method="post">
<div class="mb-3">
<label for="time" class="form-label">时间</label>
<input type="datetime-local" class="form-control" id="time" name="time" required>
</div>
<div class="mb-3">
<label for="location" class="form-label">地点</label>
<input type="text" class="form-control" id="location" name="location" required>
</div>
<div class="mb-3">
<label for="issue" class="form-label">异常现象</label>
<input type="text" class="form-control" id="issue" name="issue" required>
</div>
<div class="mb-3">
<label for="line" class="form-label">生产线别</label>
<input type="text" class="form-control" id="line" name="line" required>
</div>
<div class="mb-3">
<label for="shift" class="form-label">生产班别</label>
<input type="text" class="form-control" id="shift" name="shift" required>
</div>
<div class="mb-3">
<label for="model" class="form-label">生产机种</label>
<input type="text" class="form-control" id="model" name="model" required>
</div>
<div class="mb-3">
<label for="note" class="form-label">备注</label>
<textarea class="form-control" id="note" name="note" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
</body>
</html>
```
`query.html` 页面:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据查询</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>数据查询</h1>
<form action="/query" method="post">
<div class="mb-3">
<label for="time" class="form-label">时间</label>
<input type="datetime-local" class="form-control" id="time" name="time">
</div>
<div class="mb-3">
<label for="location" class="form-label">地点</label>
<input type="text" class="form-control" id="location" name="location">
</div>
<div class="mb-3">
<label for="issue" class="form-label">异常现象</label>
<input type="text" class="form-control" id="issue" name="issue">
</div>
<div class="mb-3">
<label for="line" class="form-label">生产线别</label>
<input type="text" class="form-control" id="line" name="line">
</div>
<div class="mb-3">
<label for="shift" class="form-label">生产班别</label>
<input type="text" class="form-control" id="shift" name="shift">
</div>
<div class="mb-3">
<label for="model" class="form-label">生产机种</label>
<input type="text" class="form-control" id="model" name="model">
</div>
<button type="submit" class="btn btn-primary">查询</button>
</form>
<hr>
<h2>查询结果</h2>
{% if data %}
<table class="table">
<thead>
<tr>
<th>时间</th>
<th>地点</th>
<th>异常现象</th>
<th>生产线别</th>
<th>生产班别</th>
<th>生产机种</th>
<th>备注</th>
</tr>
</thead>
<tbody>
{% for item in data %}
<tr>
<td>{{ item.time }}</td>
<td>{{ item.location }}</td>
<td>{{ item.issue }}</td>
<td>{{ item.line }}</td>
<td>{{ item.shift }}</td>
<td>{{ item.model }}</td>
<td>{{ item.note }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>暂无数据</p>
{% endif %}
</div>
</body>
</html>
```
需要注意的是,这个 HTML 代码中使用了 Bootstrap 作为前端框架,需要在头部引入对应的 CSS 和 JavaScript 文件。