表格table+表单form——web前端从入门到进阶进阶

前端

2023-11-17 17:49:24

表格与表单：Web开发中的基石

表格和表单是构建交互式网页不可或缺的元素。它们允许我们组织、显示和收集数据，为用户提供直观的用户体验。

表格：数据展示利器

表格由行和列组成，用于展示结构化数据。它们通过明晰的视觉表示方式，方便用户快速扫描和查找信息。

表单：数据的收集与提交

表单是收集用户输入的重要工具。它们由各种元素组成，包括文本输入框、下拉菜单和按钮，用于获取姓名、地址、电子邮件等信息。收集到的数据可以通过提交按钮发送到服务器，进行处理或存储。

表格的属性

边框: 设置表格的边框宽度。
内边距: 定义单元格与内容之间的空间。
间距: 控制单元格之间的距离。
宽度和高度: 指定表格的尺寸。

表头的属性

对齐方式: 设置表头单元格的水平对齐方式。
垂直对齐方式: 定义表头单元格的垂直对齐方式。
跨越列数和行数: 控制表头单元格跨越的范围。

表体的属性

表体属性与表头类似，用于定义表主体单元格的属性。

表尾的属性

表尾属性用于设置表格表尾单元格的属性， thường用于总结性信息。

表单的属性

提交地址: 指定表单提交数据的目的地。
提交方式: 设置数据提交的方法（例如GET或POST）。
数据类型: 定义提交数据的类型（例如文本或多部分数据）。
目标窗口: 控制表单提交后的显示位置。

输入元素的属性

类型: 定义输入元素的类型（例如文本、数字、复选框）。
名称: 设置输入元素的唯一标识符。
值: 指定输入元素的初始值。
大小: 控制输入元素的宽度。
最大长度: 设置输入字符的最大数量。
提示信息: 在输入元素为空时显示提示信息。

选择元素的属性

名称: 选择元素的唯一标识符。
多选: 允许用户选择多个选项。
可见选项数: 指定选择元素中同时显示的选项数量。

文本域元素的属性

名称: 文本域元素的唯一标识符。
列数: 定义文本域的列数。
行数: 设置文本域的行数。

按钮元素的属性

类型: 定义按钮的类型（例如提交或重置）。
名称: 设置按钮的唯一标识符。
值: 指定按钮上的文本。

实例

<!-- 表格示例 -->
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>30</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

<!-- 表单示例 -->
<form action="submit.php" method="post">
  <label for="name">姓名：</label>
  <input type="text" name="name" id="name">
  <br>
  <label for="age">年龄：</label>
  <input type="number" name="age" id="age">
  <br>
  <label for="gender">性别：</label>
  <select name="gender" id="gender">
    <option value="male">男</option>
    <option value="female">女</option>
  </select>
  <br>
  <button type="submit">提交</button>
</form>