永久网站web网页模板
在 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>) 用于收集用户输入的数据，包含各种输入控件和提交按钮。 - 它们都在网页中发挥重要作用，表格主要展示内容，表单用于交互和数据提交。