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

devtools/2024/12/23 4:58:33/
htmledit_views">

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

1. HTML 表格(<table>

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

主要结构
html"><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>:定义表格的表尾部分,通常包含总计信息或总结。

示例:

html"><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>

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

主要结构
html"><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 属性指定请求方法(通常是 GETPOST)。
  • <input>:定义表单中的输入框,可以用于接受各种类型的数据,如文本、密码、单选框、复选框等。type 属性决定输入框的类型。
  • <label>:定义表单控件的标签,通常用于描述对应的输入框。
  • <textarea>:定义一个多行文本输入框,用于输入较长的文本。
  • <button>:定义一个按钮,常用于提交表单,type 属性可以设置为 submitresetbutton
  • <select>:定义一个下拉列表,包含一个或多个 <option> 元素,用于选择数据。
  • <option>:定义 <select> 元素中的选项。
  • <fieldset>:用于将表单的多个控件分组,常配合 <legend> 使用。
  • <legend>:定义 <fieldset> 的标题,用于描述控件组的内容。
常用的输入类型(<input type="...">
  • text:普通的文本输入框。
  • password:密码输入框,输入内容会以星号(*)形式显示。
  • email:电子邮箱输入框,浏览器会验证输入的格式是否符合邮箱标准。
  • number:数字输入框,允许输入数字。
  • checkbox:复选框,允许用户选择多个选项。
  • radio:单选框,允许用户在多个选项中选择一个。
  • submit:提交按钮,点击时会提交表单。
  • reset:重置按钮,点击时会重置表单中的所有输入内容。
示例:
html"><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. 组合使用

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

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

http://www.ppmy.cn/devtools/144586.html

相关文章

Libevent实现TCP客户端服务器

Libevent实现TCP客户端服务器 17-libevent实现Tcp服务器流程_bilibili_哔哩哔哩_bilibili 文章目录 Libevent实现TCP客户端服务器1.服务器端实现流程2.服务器端代码实现3.客户端实现流程4.客户端代码实现 1.服务器端实现流程 1.创建 event_base 2.创建服务器连接监听器 evc…

服务器运行Vue项目

1.配置nodejs 1.wget获取到nodejs的压缩包 修改成自己需要的版本的下载链接。右键点击&#xff0c;复制下载链接即可。 wget https://nodejs.org/dist/v20.18.1/node-v20.18.1-linux-x64.tar.xz2.解压 tar xf node-v20.18.1-linux-x64.tar.xz3.移动目录 mkdir /usr/local/l…

速通Python 第二节

一、动态类型特性 在 Python 中 , 一个变量是什么类型 , 是可以在 " 程序运行 " 过程中发生变化的 . 这个特性称为 " 动态类型 " a 10 print(type(a)) a hello print(type(a) 在程序执行过程中, a 的类型刚开始是 int, 后面变成了 str. C/Java 这…

ISP算法之黑电平BLC校正

黑电平形成原因 Sensor本身问题 CMOS Sensor本身的电路会存在暗电流(dark current)&#xff0c;在没有光照条件下&#xff0c;感光器件等也会存在流动的电流&#xff0c;在光敏二极管器的伏安特性曲线中反向截止区电流并不为零&#xff08;如下图&#xff09;。导致在Sensor遮…

二、使用langchain搭建RAG:金融问答机器人--数据清洗和切片

选择金融领域的专业文档作为源文件 这里选择 《博金大模型挑战赛-金融千问14b数据集》&#xff0c;这个数据集包含若干公司的年报&#xff0c;我们将利用这个年报搭建金融问答机器人。 具体下载地址 这里 git clone https://www.modelscope.cn/datasets/BJQW14B/bs_challenge_…

聚观早报 | 百度回应进军短剧;iPad Air将升级OLED

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 12月18日消息 百度回应进军短剧 iPad Air将升级OLED 三星Galax S25 Ultra配色细节 一加Ace 5系列存储规格 小米…

JAVA数字人创作文案视频链接提取数字人源码小程序+公众号+APP+H5

JAVA数字人创作文案提取与生成系统&#xff1a;全能型内容创作与运营解决方案 在当今数字化内容井喷的时代&#xff0c;如何高效、创新地生产并传播内容&#xff0c;成为了众多内容创作者、商户乃至企业面临的重要课题。我们的JAVA数字人创作文案提取与生成系统&#xff0c;正…

【橘子微服务】spring cloud function的编程模型

简介 在我们初探了saga的分布式事务之后&#xff0c;我们后面会基于springcloud function(简称:scf)和springcloud stream(scs)实现一下Choreography模式的saga。所以在此之前我们需要了解一下这两个组件的知识。首先我们来看scf的一些概念。 一、简单使用 在进入概念之前&a…