HTML入门—表格与表单设计
表格标签基础
| 元素类型 | 用途说明 | 关键属性 |
|---|---|---|
| <table> | 定义表格容器 | |
| <caption> | 表格标题（提升可访问性） | |
| <thead> | 表头区域 | |
| <tbody> | 表格主体内容 | |
| <tfoot> | 表尾汇总数据 | |
| <tr> | 表格行 | |
| <th> | 表头单元格 | scope="col/row" |
| <td> | 普通数据单元格 | colspan/rowspan |
标签实践：
<table>
<caption>2023年销售数据</caption> <!-- 表格标题 -->
<thead> <!-- 表头 -->
<tr>
<th scope="col">季度</th>
<th scope="col">销售额</th>
<th scope="col">增长率</th>
</tr>
</thead>
<tbody> <!-- 表格主体 -->
<tr>
<th scope="row">Q1</th>
<td>¥1,200,000</td>
<td>+15%</td>
</tr>
<tr>
<th scope="row">Q2</th>
<td>¥1,800,000</td>
<td>+25%</td>
</tr>
</tbody>
<tfoot> <!-- 表尾 -->
<tr>
<td colspan="2">年度总计</td>
<td>¥3,000,000</td>
</tr>
</tfoot>
</table>
效果展示：
表单标签
| 元素类型 | 用途说明 | 关键属性 |
| <form> | 表单容器 | action/method |
| <label> | 输入项标签 | for="对应id" |
| <input> | 通用输入控件 | type/name/required |
| <select> | 下拉选择框 | name/multiple |
| <button> | 交互按钮 | type="submit/reset/button" |
| <textarea> | 多行文本输入 | rows/cols |
| <fieldset> | 表单分组 | |
| <legend> | 分组标题 |
标签实践：
<form action="" method="get">
<label for="">用户名:</label>
<input type="text">
<br>
<label for="">密码:</label>
<input type="text">
<br>
<label for="">性别:</label>
<input type="radio" name="gender" value="male">
<label for="">男</label>
<input type="radio" name="gender" value="female">
<label for="">女</label>
<br>
<label for="">兴趣</label>
<input type="radio">
<label for="">唱歌</label>
<input type="radio">
<label for="">跳舞</label>
<input type="radio">
<label for="">游泳</label>
<br>
<label for="">上传头像:</label>
<input type="file" name="" id="">
<br>
<input type="submit" value="提交">
<input type="submit" value="重置">
<input type="submit" value="普通按钮">
<input type="image">
</form>
表格与表单对比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- <style>
tr td:first-child{
text-align: right;
/* 右边对齐 */
}
/* tr:last-child{
text-align: center;
} */
</style> -->
</head>
<body>
<h4>使用表单</h4>
<form action="" method="get">
<label for="">用户名:</label>
<input type="text" />
<br />
<label for="">密码:</label>
<input type="text" />
<br />
<label for="">性别:</label>
<input type="radio" name="gender" value="male" />
<label for="">男</label>
<input type="radio" name="gender" value="female" />
<label for="">女</label>
<br />
<label for="">兴趣</label>
<input type="radio" />
<label for="">唱歌</label>
<input type="radio" />
<label for="">跳舞</label>
<input type="radio" />
<label for="">游泳</label>
<br />
<label for="">上传头像:</label>
<input type="file" name="" id="" />
<br />
<input type="submit" value="提交" />
<input type="submit" value="重置" />
<input type="submit" value="普通按钮" />
<input type="image" />
</form>
<h4>样例展示(使用表格)</h4>
<form action="" method="get">
<!-- get为默认,get会全部拼接在网页上 -->
<!-- action为服务器处理地址 -->
<table>
<tr>
<td>用户名:</td>
<td>
<input type="text" placeholder="输入用户名" name="name" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" placeholder="输入密码" name="key" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" id="male" />
<label for="male">男</label>
<input type="radio" name="sex" id="female" />
<label for="female">女</label>
<!-- 设置id,进行绑定,扩大选择范围 -->
</td>
</tr>
<tr>
<td>兴趣:</td>
<td>
<input type="checkbox" />唱歌 <input type="checkbox" />跳舞
<input type="checkbox" />游泳
</td>
</tr>
<tr>
<td>上传头像:</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td colspan="2">
<!-- 两行合并 -->
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="button" value="普通按钮" />
<input type="image" />
</td>
<!-- <td></td> -->
</tr>
</table>
</form>
</body>
</html>
