html 中表格和表单的关系与区别

news2024/12/26 5:22:51

在 HTML 中，表格 (<table>) 和表单 (<form>) 是两种常用于展示数据和收集用户输入的元素。它们具有不同的功能和结构。以下是关于这两者的详细介绍：

1. HTML 表格（`<table>`）

表格用于展示结构化的数据，通常由行（<tr>）和列（<td>）组成。表格在网页中广泛用于显示数据列表、报告、统计信息等。

主要结构

<table>
  <thead>
    <tr>
      <th>列名1</th>
      <th>列名2</th>
      <th>列名3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <tr>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
    </tr>
  </tbody>
</table>

表格的常用标签

<table>：定义整个表格。
<tr>：定义表格的行（table row）。
<td>：定义表格的单元格（table data），用于展示数据。
<th>：定义表头单元格，通常用于表示列的标题或标题行。
<thead>：定义表格的表头部分，通常包含表头行（<tr>）和表头单元格（<th>）。
<tbody>：定义表格的主体部分，包含表格的主要数据行。
<tfoot>：定义表格的表尾部分，通常包含总计信息或总结。

示例：

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>35</td>
      <td>上海</td>
    </tr>
  </tbody>
</table>

2. HTML 表单（`<form>`）

表单用于收集和发送用户输入的数据，通常用于登录、注册、搜索、提交反馈等功能。表单中的各种输入控件（如文本框、单选框、复选框、按钮等）允许用户提供信息。

主要结构

<form action="/submit" method="POST">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>

  <label for="email">电子邮箱：</label>
  <input type="email" id="email" name="email" required>

  <label for="message">留言：</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">提交</button>
</form>

表单的常用标签

<form>：定义整个表单，包含所有输入控件和提交按钮。action 属性指定表单提交的目标 URL，method 属性指定请求方法（通常是 GET 或 POST）。
<input>：定义表单中的输入框，可以用于接受各种类型的数据，如文本、密码、单选框、复选框等。type 属性决定输入框的类型。
<label>：定义表单控件的标签，通常用于描述对应的输入框。
<textarea>：定义一个多行文本输入框，用于输入较长的文本。
<button>：定义一个按钮，常用于提交表单，type 属性可以设置为 submit、reset 或 button。
<select>：定义一个下拉列表，包含一个或多个 <option> 元素，用于选择数据。
<option>：定义 <select> 元素中的选项。
<fieldset>：用于将表单的多个控件分组，常配合 <legend> 使用。
<legend>：定义 <fieldset> 的标题，用于描述控件组的内容。

常用的输入类型（`<input type="...">`）

text：普通的文本输入框。
password：密码输入框，输入内容会以星号（*）形式显示。
email：电子邮箱输入框，浏览器会验证输入的格式是否符合邮箱标准。
number：数字输入框，允许输入数字。
checkbox：复选框，允许用户选择多个选项。
radio：单选框，允许用户在多个选项中选择一个。
submit：提交按钮，点击时会提交表单。
reset：重置按钮，点击时会重置表单中的所有输入内容。

示例：

<form action="/submit" method="POST">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>

  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>

  <label for="gender">性别：</label>
  <input type="radio" id="male" name="gender" value="male" checked>
  <label for="male">男</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label>

  <label for="newsletter">订阅新闻：</label>
  <input type="checkbox" id="newsletter" name="newsletter" value="yes">

  <button type="submit">提交</button>
</form>

3. 表格与表单的区别

目的：表格主要用于展示数据，而表单主要用于收集用户输入的数据。
结构：表格由行和列组成，通常用于展示信息；表单由输入控件（如文本框、按钮等）组成，用于提交信息。
标签：表格使用 <table>、<tr>、<td> 等标签，而表单使用 <form>、<input>、<button>、<select> 等标签。

4. 组合使用

表格和表单有时可以结合使用，在表格中包含表单控件，允许用户编辑数据并提交。例如，可以在表格的每一行中放入一个“编辑”按钮，点击后可以修改该行的内容并提交表单。

示例：

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>
        <form action="/update" method="POST">
          <input type="text" name="name" value="张三">
          <input type="number" name="age" value="28">
          <button type="submit">更新</button>
        </form>
      </td>
    </tr>
    <tr>
      <td>李四</td>
      <td>35</td>
      <td>
        <form action="/update" method="POST">
          <input type="text" name="name" value="李四">
          <input type="number" name="age" value="35">
          <button type="submit">更新</button>
        </form>
      </td>
    </tr>
  </tbody>
</table>