html如何写一个管理宠物信息的界面
时间: 2024-05-10 22:20:24 浏览: 14
首先,需要创建一个 HTML 文档,并在其中添加必要的元素和样式。
以下是一个简单的宠物信息管理界面的 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>宠物信息管理</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
</style>
</head>
<body>
<h1>宠物信息管理</h1>
<form>
<label for="name">宠物名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="type">宠物类型:</label>
<select id="type" name="type">
<option value="狗">狗</option>
<option value="猫">猫</option>
<option value="鱼">鱼</option>
<option value="鸟">鸟</option>
</select><br><br>
<label for="age">宠物年龄:</label>
<input type="number" id="age" name="age"><br><br>
<input type="submit" value="添加宠物">
</form>
<br>
<table>
<thead>
<tr>
<th>宠物名</th>
<th>宠物类型</th>
<th>宠物年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小白</td>
<td>狗</td>
<td>3</td>
</tr>
<tr>
<td>小黑</td>
<td>猫</td>
<td>2</td>
</tr>
<tr>
<td>小金</td>
<td>鱼</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>
```
以上代码包括一个表单和一个表格。在表单中,可以输入宠物的名称、类型和年龄,然后点击“添加宠物”按钮,将宠物信息添加到表格中。表格中显示了已经添加的宠物信息。
为了使界面更加美观,添加了一些 CSS 样式,包括表格的边框和内边距。可以根据需要自定义样式。
相关推荐
![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_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)