HTML 表单基础

表单通过 <form> 标签定义，用于收集用户输入数据并提交到服务器。表单通常包含输入字段（如 <input>）、下拉菜单（<select>）和按钮（<button>）。

<form action="/submit" method="POST">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  <button type="submit">提交</button>
</form>

• action: 指定表单提交的服务器地址
• method: 定义HTTP请求方法（GET或POST）
• name: 输入字段的标识符，用于服务器端识别

常用输入类型

HTML5 提供了多种 <input> 类型：

<input type="text">    <!-- 单行文本 -->
<input type="password"> <!-- 密码输入 -->
<input type="email">   <!-- 邮箱验证 -->
<input type="number">  <!-- 数字输入 -->
<input type="date">    <!-- 日期选择 -->
<input type="checkbox"> <!-- 复选框 -->
<input type="radio">    <!-- 单选按钮 -->
<input type="file">     <!-- 文件上传 -->
<input type="submit">   <!-- 提交按钮 -->

每种输入类型都有特定的验证和行为。例如，type="email" 会自动验证输入是否符合邮箱格式。

表单控件组合

表单通常需要组合多种控件：

<form>
  <fieldset>
    <legend>个人信息</legend>
    <label>姓名: <input type="text" name="name"></label>
    <label>年龄: <input type="number" name="age"></label>
  </fieldset>
  
  <label>性别:
    <input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" value="female">女
  </label>
  
  <label>兴趣:
    <input type="checkbox" name="hobby" value="sports">体育
    <input type="checkbox" name="hobby" value="music">音乐
  </label>
  
  <label>城市:
    <select name="city">
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
    </select>
  </label>
</form>

• <fieldset> 用于分组相关控件
• <legend> 为分组提供标题
• 单选按钮（radio）共享相同 name 属性值
• 复选框（checkbox）允许多选

HTML 表格结构

表格通过 <table> 标签定义，包含行（<tr>）、表头单元格（<th>）和数据单元格（<td>）。

<table border="1">
  <caption>学生成绩表</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>数学</th>
      <th>语文</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>90</td>
      <td>85</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>80</td>
      <td>92</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>平均分</td>
      <td>85</td>
      <td>88.5</td>
    </tr>
  </tfoot>
</table>

• <caption> 为表格添加标题
• <thead> 定义表头部分
• <tbody> 包含表格主要内容
• <tfoot> 定义表格页脚
• border 属性设置表格边框

表格高级特性

HTML5 为表格增加了语义化元素和属性：

<table>
  <colgroup>
    <col span="2" style="background-color: #f2f2f2">
    <col style="background-color: #ddd">
  </colgroup>
  <tr>
    <th rowspan="2">姓名</th>
    <th colspan="2">成绩</th>
  </tr>
  <tr>
    <th>期中</th>
    <th>期末</th>
  </tr>
</table>

• colspan 和 rowspan 实现单元格合并
• <colgroup> 和 <col> 定义列样式
• scope 属性提高表格可访问性

表单与表格的结合应用

表单和表格常结合使用，例如创建可编辑的数据表格：

<table>
  <tr>
    <th>产品</th>
    <th>价格</th>
    <th>操作</th>
  </tr>
  <tr>
    <td><input type="text" value="笔记本电脑"></td>
    <td><input type="number" value="5999"></td>
    <td><button type="button">保存</button></td>
  </tr>
</table>

这种模式在管理后台系统中很常见，允许用户直接在表格中编辑多条记录。

最佳实践

确保表单和表格符合可访问性标准：

1. 始终为表单控件添加 <label>
2. 为表格添加适当的标题和描述
3. 使用 scope 属性明确表头与数据的关系
4. 避免过度嵌套表格影响性能
5. 对复杂表单考虑分步骤或分组

<!-- 可访问性示例 -->
<table aria-describedby="table-desc">
  <caption id="table-desc">2023年销售数据</caption>
  <thead>
    <tr>
      <th scope="col">月份</th>
      <th scope="col">销售额</th>
    </tr>
  </thead>
</table>

通过遵循这些原则，可以创建既功能强大又易于使用的HTML表单和表格结构。