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>) 用于收集用户输入的数据，包含各种输入控件和提交按钮。 - 它们都在网页中发挥重要作用，表格主要展示内容，表单用于交互和数据提交。
相关文章：
html 中 表格和表单的关系与区别
在 HTML 中，表格 (<table>) 和表单 (<form>) 是两种常用于展示数据和收集用户输入的元素。它们具有不同的功能和结构。以下是关于这两者的详细介绍： 1. HTML 表格（<table>） 表格用于展示结构化的数据…...
Android14 OTA升级速度过慢问题解决方案
软件版本：Android14 硬件平台：QCS6115 问题：OTA整包升级接近20min，太长无法忍受。 该问题为Android高版本的虚拟AB分区压缩技术所致，其实就是时间换空间，个人推测AB分区压缩会节约硬件存储空间࿰…...
Jetson xavier 刷机安装教程
在对Jetson进行刷机过程，浏览了很多的相关教程，大部分教程并不全，而且按照步骤执行会出现许多奇奇怪怪的错误，为了避免大家踩坑，这里给出了完整的解决方法，希望能够提供帮助！ 首先大家需要准备…...
Hadoop集群（HDFS集群、YARN集群、MapReduce计算框架）
一、 简介 Hadoop主要在分布式环境下集群机器，获取海量数据的处理能力，实现分布式集群下的大数据存储和计算。 其中三大核心组件: HDFS存储分布式文件存储、YARN分布式资源管理、MapReduce分布式计算。 二、工作原理 2.1 HDFS集群 Web访问地址&…...
芯科科技蓝牙、Wi-Fi、Wi-SUN产品广获业界认可，技术创新引领行业潮流
物联网领军企业领跑未来无线开发平台发展 2024年，Silicon Labs（亦称“芯科科技“，NASDAQ：SLAB）在物联网（IoT）领域持续深耕，凭借创新的企业发展理念与实践、行业领先的技术与产品&am…...
C语言——数据在内存中的存储
目录 前言 一数据类型 类型归类 二整形在内存中的存储 原反补码 大小端 相关练习题 三浮点数在内存中的储存 浮点数储存规则 前言 只有取学习数据在内存中的存储，我们在以后才能定义好（用好）各种类型的数据！ 一数据类型…...
后端-redis
Redis RedisString类型String类型的常用命令 Hash类型Hash类型的常用命令 List类型List类型的常用命令 Set类型Set类型的常用命令 SortedSet类型SortedSet类型的常用命令 Redis序列化缓存更新策略缓存穿透缓存雪崩缓存击穿 Redis Redis是一个key-value的数据库，key…...
sqoop,flume草稿
连xftp传sqoop压缩包到/opt/soft 目录下 cd opt/soft/ tar -zxvf sqoop-1.4.7.bin__hadoop-2.6.0.tar.gz mv sqoop-1.4.7.bin__hadoop-2.6.0 sqoop cd sqoop/conf/ cp sqoop-env-template.sh sqoop-env.sh vi sqoop-env-sh export HADOOP_COMMON_HOME/opt/soft/hadoop expo…...
UE5 渲染管线 学习笔记
兰伯特 SSS为散射的意思 带Bias的可以根据距离自动切换mip的卷积值 而带Level的值mipmaps的定值 #define A8_SAMPLE_MASK .a 这样应该就很好理解了 这个只采样a通道 带Level的参考上面的 朝左上和右下进行模糊 带Bias参考上面 随机数 4D 3D 2D 1D HLSL内置UV HLSL内置鼠标坐…...
线程池使用不当导致线程死锁
线程池使用不当导致线程死锁 问题代码问题分析 问题代码 在项目开发中，为了支持并发场景，减少资源开销，通常会使用公共线程池，即预先创建一个线程池，需要并发时都将任务提交该线程池中。类似如下代码 public class T…...
SpringBoot状态机
Spring Boot 状态机（State Machine）是 Spring Framework 提供的一种用于实现复杂业务逻辑的状态管理工具。它基于有限状态机（Finite State Machine, FSM）的概念，允许开发者定义一组状态、事件以及它们之间的转换规则。…...
细说STM32F407单片机轮询方式读写SPI FLASH W25Q16BV
目录 一、工程配置 1、时钟、DEBUG 2、GPIO 3、SPI2 4、USART6 5、NVIC 二、软件设计 1、FALSH （1）w25flash.h （2） w25flash.c 1）W25Q16基本操作指令 2）计算地址的辅助功能函数 3）器…...
HTMLCSS：惊！3D 折叠按钮
这段代码创建了一个具有 3D 效果和动画的按钮，按钮上有 SVG 图标和文本。按钮在鼠标悬停时会显示一个漂浮点动画，图标会消失并显示一个线条动画。这种效果适用于吸引用户注意并提供视觉反馈。按钮的折叠效果和背景渐变增加了页面的美观性。 演示效果 HT…...
如何更好的进行时间管理
先想一下我们想要做的事情，然后拿出Excel表格将这些事情记录下来，我们把它叫做任务对这些任务按照重要性，紧急程度进行排序，拿出表格中的前六个任务，就是今天要做的任务新建另一张excel表格，表格的一列为时…...
我在华为的安全日常
在华为工作了数年后，我养成了一个习惯：每次离开座位，即便是去卫生间，我也会条件反射地锁屏电脑。晚上回到家，躺在床上，脑海中偶尔会闪过一丝疑虑：办公室的门窗是否关好？虽然这种担忧…...
for媒体打破智能座舱体验同质化，斑马智行荣获“华舆奖”优秀创
打破智能座舱体验同质化，斑马智行荣获“华舆奖”优秀创新生态伙伴 12月12日，消费者洞察与市场研究机构J.D. Power|君迪与同济大学 HVR Lab（人车关系实验室）共同发布了 2024 中国智能座舱的研究洞察，并公布了华舆奖中国…...
自己搭建专属AI：Llama大模型私有化部署
前言 AI新时代，提高了生产力且能帮助用户快速解答问题，现在用的比较多的是Openai、Claude，为了保证个人隐私数据，所以尝试本地（Mac M3）搭建Llama模型进行沟通。 Gpt4all 安装比较简单，根据 G…...
芯片Tapeout power signoff 之IR Drop Redhawk Ploc文件格式及其意义
数字IC后端工程师在芯片流程最后阶段都会使用redhawk或voltus进行设计的IR Drop功耗signoff分析。必须确保静态，动态ir drop都符合signoff标准。 在做redhawk ir drop分析前，我们需要提供一个redhawk ploc供电点坐标。 数字IC设计后端实现前期预防IR D…...
[机器学习]sklearn入门指南（1）
简介 scikit-learn（简称sklearn）是一个开源的Python机器学习库，它提供了简单而高效的工具用于数据挖掘和数据分析，并且拥有一个活跃的开发社区。它建立在NumPy、SciPy和matplotlib这些科学计算库之上，旨在提供一致且可…...
GitCode 光引计划投稿 | GoIoT：开源分布式物联网开发平台
GoIoT 是基于Gin 的开源分布式物联网（IoT）开发平台，用于快速开发，部署物联设备接入项目，是一套涵盖数据生产、数据使用和数据展示的解决方案。 GoIoT 开发平台，它是一个企业级物联网平台解决方案ÿ…...
【R语言遥感技术】“R+遥感”的水环境综合评价方法
R语言在遥感领域中是一个强大的工具，它提供了一系列的功能和优势，使得遥感数据的分析和应用更加高效和灵活。以下是R语言在遥感中的具体应用： 数据处理：R语言可以处理和清洗遥感数据，包括数据转换、滤波处理、去噪和数…...
QT--信号与槽机制
什么是信号与槽？ 在 Qt 中，信号与槽是一种用于对象间通信的机制。它使得一个对象可以通知其他对象某个事件的发生，而不需要直接知道这些对象的具体实现。这种机制非常适合事件驱动的编程模型，如用户界面交互。 1. 信号ÿ…...
Windbg常用命令
禁止垃圾信息 ed nt!Kd_STORMINIPORT_Mask 0 ed nt!Kd_SXS_Mask 0 ed nt!Kd_FUSION_Mask 0 命令大全: 命令 - Windows drivers | Microsoft Learn .reload /f 重新加载符号表 常用命令 继续执行: g单步过/步入: p, t退出: q查看调用堆栈: k, kb列出模块: lm, lml设置断…...
 解决多尺度、小目标)
YOLO11改进-模块-引入多分支卷积InceptionDepthwiseConvolution(IDC) 解决多尺度、小目标
YOLOv11 的设计目标是通过高效的网络结构，在保证准确率的前提下，最大化推理速度。传统卷积操作虽然能够捕获局部信息，但在处理大规模场景或复杂背景时，较小的感受野可能导致细节信息不足，影响模型的检测能力。为了解决…...
国标GB28181-2022平台EasyGBS：安防监控中P2P的穿透方法
在安防监控领域，P2P技术因其去中心化的特性而受到关注，尤其是在远程视频监控和数据传输方面。P2P技术允许设备之间直接通信，无需通过中央服务器，这在提高效率和降低成本方面具有明显优势。然而，P2P技术在实际应用中也面…...
C++软件设计模式之外观（Facade）模式
C软件设计模式中的外观（Facade）模式 1. 外观模式的定义 外观模式（Facade Pattern）是一种结构型设计模式，它为一个复杂的子系统提供一个简化的接口。外观模式通过一个统一的接口来访问子系统的多个组成部分࿰…...
Spring Boot 项目创建
创建一个新项目： 打开 Spring Initializr 网址：https://start.spring.io/ ，然后创建一个新项目： springboot3.3.5_jdk17： Project（Maven）编程语言（Java 17）Spring Boo…...
SharpDX 从入门到精通：全面学习指南
摘要： 本文旨在为想要深入学习 SharpDX 的开发者提供一份全面的指南。从 SharpDX 的基础概念入手，逐步深入探讨其在不同场景下的应用，包括图形渲染、音频处理等，并结合大量详细的代码案例帮助读者更好地理解和掌握 SharpDX 的使用…...
)
【Web】2024“国城杯”网络安全挑战大赛决赛题解(全)
最近在忙联通的安全准入测试，很少有时间看CTF了，今晚抽点时间回顾下上周线下的题(期末还没开始复习😢) 感觉做渗透测试一半的时间在和甲方掰扯&水垃圾洞，没啥惊喜感，还是CTF有意思 目录 Mountain ez_zhuawa 图…...
操作系统（24）提高磁盘I/O速度的途径
前言 操作系统提高磁盘I/O速度的途径多种多样，这些途径旨在减少磁盘访问的延迟和开销，提高数据传输的效率。 一、磁盘高速缓存（Disk Cache） 磁盘高速缓存是一种在内存中为磁盘数据设置的缓冲区，用于存储磁盘中某些盘块…...
en3d 部署笔记
目录 依赖项： Nvdiffrast 编译代码和frpc_linux_amd64 下载地址： tiny-cuda-nn 安装 ICON算法库依赖 icon依赖 kaolin infer_normal_fixpose 解决 报错了，推荐的安装方法： kaolin测试： ICON依赖项 requirements.txt 改进 voxelize_cuda 安装ok 运行后： 修改代…...
c++类型判断和获取原始类型
std::traits学习 类型判断和退化（获取原始类型）的原理就是利用模板的特例化。根据调用模板的特例化，在特例化模板中实现判断的逻辑或者退化的逻辑。 一、类型判断 判断整型数据的模板类 #include <iostream> namespace zk {templa…...
医疗行业 UI 设计系列合集（一）：精准定位
在当今数字化时代，医疗行业与信息技术的融合日益紧密，UI 设计在其中扮演着至关重要的角色。精准定位的 UI 设计能够显著提升医疗产品与服务的用户体验，进而对医疗效果和患者满意度产生积极影响。 一、医疗行业 UI 设计的重要性概述 医疗行业…...
EasyExcel停更，FastExcel接力
11月6日消息，阿里巴巴旗下的Java Excel工具库EasyExcel近日宣布，将停止更新，未来将逐步进入维护模式，将继续修复Bug，但不再主动新增功能。 EasyExcel以其快速、简洁和解决大文件内存溢出的能力而著称，官方…...
java agent的使用【通俗易懂版】
一、静态代理Agent 1．生成Agent的jar包 （1）创建Agent项目，引入javassist.jar包 （2）编写premain方法 import java.lang.instrument.Instrumentation;public class Agent1 {public static void premain(Stri…...
)
010 Qt_输入类控件(LineEdit、TextEdit、ComboBox、SpinBox、DateTimeEdit、Dial、Slider)
文章目录 前言一、QLineEdit1.简介2.常见属性及说明3.重要信号及说明4.示例一：用户登录界面5.示例二：验证两次输入的密码是否一致显示密码 二、TextEdit1.简介2.常见属性及说明3.重要信号及说明4.示例一：获取多行输入框的内容5.示例二&#x…...
C++设计模式：享元模式 （附文字处理系统中的字符对象案例）
什么是享元模式？ 享元模式是一个非常实用的结构型设计模式，它的主要目的是节省内存，尤其在需要创建大量相似对象时。 通俗解释： 想象我们在写一本书，每个字母都需要表示出来。如果每个字母都单独用对象表示ÿ…...
机器学习之 KNN 算法
一、引言 在机器学习领域中，K 近邻（K-Nearest Neighbors，KNN）算法是一种简单而有效的分类和回归算法。它的基本思想是根据数据点之间的距离来确定它们的相似性，并根据其最近的邻居的类别或数值来预测新数据点的类别或…...
矩阵：Input-Output Interpretation of Matrices （中英双语）
矩阵的输入-输出解释：深入理解与应用 在线性代数中，矩阵与向量的乘积 ( y A x y Ax yAx ) 是一个极为重要的关系。通过这一公式，我们可以将矩阵 ( A A A ) 看作一个将输入向量 ( x x x ) 映射到输出向量 ( y y y ) 的线性变换。在这种…...
ctfhub技能树——disable_functions
LD_PRELOAD 来到首页发现有一句话直接就可以用蚁剑连接 根目录里有/flag但是不能看;命令也被ban了就需要绕过了 绕过工具在插件市场就可以下载 如果进不去的话 项目地址: #本地仓库;插件存放 antSword\antData\plugins 绕过选择 上传后我们点进去可以看到多了一个绕过的文件;…...
Web3.0安全开发实践：探索比特币DeFi生态中的PSBT
近年来，部分签名比特币交易（PSBT）在比特币生态系统中获得了显著关注。随着如Ordinal和基于铭文的资产等创新的兴起，安全的多方签名和复杂交易的需求不断增加，这使得PSBT成为应对比特币生态不断发展中不可或缺的工具。 …...
【Yonghong 企业日常问题 06】上传的文件不在白名单，修改allow.jar.digest属性添加允许上传的文件SH256值？
文章目录 前言问题描述问题分析问题解决1.允许所有用户上传驱动文件2.如果是想只上传白名单的驱动 前言 该方法适合永洪BI系列产品，包括不限于vividime desktop，vividime z-suit，vividime x-suit产品。 问题描述 当我们连接数据源的时候&a…...
Lecture 6 Isolation System Call Entry
文章目录 一 重要的函数清单1 write(user/usys.s) 一 usertrap函数(C code) Lecture6 Isolation & System Call Entry视频链接 对应XV6 Book Chapter 4 Traps and device drivers 一 重要的函数清单 1 write(user/usys.s) .global write write:li a7, SYS_writeecallret…...
重温设计模式----装饰模式
文章目录 装饰模式定义UML 图其主要优点包括：装饰模式的主要角色有：C 代码示例总结 装饰模式定义 动态的给一个对象添加一些额外的职责，就增加功能来说，装饰模式必生成子类更加灵活 装饰模式（Decorator Pattern&…...
图像处理-Ch2-空间域的图像增强
Ch2 空间域的图像增强 文章目录 Ch2 空间域的图像增强Background灰度变换函数(Gray-level Transformation)对数变换(Logarithmic)幂律变换(Power-Law)分段线性变换函数(Piecewise-Linear)对比度拉伸(Contrast-Stretching)灰度级分层(Gray-level Slicing) 直方图处理(Histogram …...
uniapp Native.js原生arr插件服务发送广播到uniapp页面中
前言 最近搞了个设备，需求是读取m1卡，厂家给了个安卓原生demo，接入arr插件如下，接入后发现还是少了一部分代码，设备服务调起后触发刷卡无法发送到uniapp里。 中间是一些踩坑记录，最后面是解决办法…...
重温设计模式--1、组合模式
文章目录 1 、组合模式（Composite Pattern）概述2. 组合模式的结构3. C 代码示例4. C示例代码25 .应用场景 1 、组合模式（Composite Pattern）概述 定义：组合模式是一种结构型设计模式，它允许你将对象组合成…...
关于鸿蒙架构feature
鸿蒙feature层模块架构 model：定义数据类型，进行接口请求 view：视图层 写UI viewModel：控制层 关于逻辑和请求调用 page页...
CentOS下，离线安装vscode的步骤；
前置条件： 1.CentOS7; 步骤： 1.下载vscode指定版本，例如； 例如 code-1.83.1-1696982959.el7.x86_64.rpm 2.使用下面命令： sudo rpm -ivh code-1.83.1-1696982959.el7.x86_64.rpm 其他： 卸载vscode的命…...
.NET周刊【12月第3期 2024-12-15】
国内文章 重磅推出 Sdcb Chats：一个全新的开源大语言模型前端 https://www.cnblogs.com/sdcb/p/18597030/sdcb-chats-intro Sdcb Chats是一个新推出的开源大语言模型前端，旨在提升用户交互体验，并填补市场上基于.NET的前端空白。它引入树状…...