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

在 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>

总结

• 表格 (<table>) 用于展示结构化的数据，以行和列的形式呈现。
• 表单 (<form>) 用于收集用户输入的数据，包含各种输入控件和提交按钮。
• 它们都在网页中发挥重要作用，表格主要展示内容，表单用于交互和数据提交。