首页 web前端 html教程 html form标签与table标签的区别是什么?这里有说明!

html form标签与table标签的区别是什么?这里有说明!

Aug 29, 2018 pm 03:37 PM
form html table

本篇文章主要介绍的是关于HTML form标签和table标签的区别有哪些,本文介绍了form标签和table标签各自的区别,还有form标签和table标签的各自作用的区别,现在让我们开始看文章吧

我们先看看HTML form标签和table标签的三点区别:

1.html中form表示一个表单,用来把一系列的控件包围起来,然后再统一发送这些数据到目标,比如最常见的注册,你说需要填写的资料,都是被封装在form里的,填写完毕后,提交form内的内容,如果不再form内则不会提交。

2.table 则是用来布局的 当你填写资料的时候 你有没有发现页面所提供的文本框,文字,按钮之类的..都摆放的非常整齐 这就是table的作用,一行一行的以表格的形式展示内容。

3.table仅仅只是用来布局用的,form则是用来封装数据的。二者在概念上是不同的,通常发挥作用的是form,但是form内那些无规则随意摆放的文本框怎么看上去很整齐呢 ,所以通常是一个form里嵌套table。

看一个form和table区别的实例:

<form action=&#39;123.jsp&#39;>
<table>
<tr>
<td>用户名:</td>
<td><input type=&#39;text&#39; /></td>
<tr>
</table>
</form>

效果大家应该都能想到吧:

tuyi.png

真正要提交给服务器的东西 ,是包含在form里的form元素,table只是将这些元素在页面上摆放整齐。

接下来看看form标签和table标签各自作用的区别:

标签作用:

标签用于为用户输入创建 HTML 表单。

1.表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。

2.表单还可以包含menus、textarea、fieldset、legend和label元素。

3.表单用于向服务器传输数据。

注释:form元素是块级元素,其前后会产生折行。

这有个实例证明:

<form action="form_action.asp" method="get">
 <p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" /></p> <input type="submit" value="Submit" /> 
</form>

标签作用:

标签定义 HTML 表格。

1.简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

2.更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

这也有实例:一个简单的 HTML 表格,包含两行两列:

<table border="1">
 <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> 
</table>

到这本篇文章就算是结束了,要是有什么问题,欢迎在下面留言

【小编推荐】

如何给html中的pre标签中的文字换行?html pre标签的使用实例

HTML ul标签的什么意思?HTML ul标签的作用详解

以上是html form标签与table标签的区别是什么?这里有说明!的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Laravel 教程
1602
29
PHP教程
1505
276
为什么我的图像未显示在HTML中? 为什么我的图像未显示在HTML中? Jul 28, 2025 am 02:08 AM

图像未显示通常因文件路径错误、文件名或扩展名不正确、HTML语法问题或浏览器缓存导致。1.确保src路径与文件实际位置一致,使用正确的相对路径;2.检查文件名大小写及扩展名是否完全匹配,并通过直接输入URL验证图片能否加载;3.核对img标签语法是否正确,确保无多余字符且alt属性值恰当;4.尝试强制刷新页面、清除缓存或使用隐身模式排除缓存干扰。按此顺序排查可解决大多数HTML图片显示问题。

初学者的基本HTML标签 初学者的基本HTML标签 Jul 27, 2025 am 03:45 AM

要快速入门HTML,只需掌握几个基础标签即可搭建网页骨架。1.页面结构必备、和,其中是根元素,包含元信息,是内容展示区域。2.标题使用到,级别越高数字越小,正文用标签分段,避免跳级使用。3.链接使用标签并配合href属性,图片使用标签并包含src和alt属性。4.列表分为无序列表和有序列表,每个条目用表示且必须嵌套在列表中。5.初学者不必强记所有标签,边写边查更高效,掌握结构、文本、链接、图片和列表即可制作基础网页。

您可以在另一个标签中放置一个标签吗? 您可以在另一个标签中放置一个标签吗? Jul 27, 2025 am 04:15 AM

❌Youcannotnesttagsinsideanothertagbecauseit’sinvalidHTML;browsersautomaticallyclosethefirstbeforeopeningthenext,resultinginseparateparagraphs.✅Instead,useinlineelementslike,,orforstylingwithinaparagraph,orblockcontainerslikeortogroupmultipleparagraph

输入标签中的名称属性是什么? 输入标签中的名称属性是什么? Jul 27, 2025 am 04:14 AM

thenAmeatTributeInAninputTagisusIfe to IndentifyTheInputWhentheFormisSubSted; iservesAsTheKeyInthekey-ValuePairsentTotheserver,wheretheuser'sinputisthevalue.1.whenaformented,

如何在HTML中创建一个无序的列表? 如何在HTML中创建一个无序的列表? Jul 30, 2025 am 04:50 AM

要创建HTML无序列表,需使用标签定义列表容器,每个列表项用标签包裹,浏览器会自动添加项目符号;1.使用标签创建列表;2.每个列表项用标签定义;3.浏览器自动生成默认圆点符号;4.可通过嵌套实现子列表;5.使用CSS的list-style-type属性可修改符号样式,如disc、circle、square或none;正确使用这些标签即可生成标准无序列表。

如何使用可满足的属性? 如何使用可满足的属性? Jul 28, 2025 am 02:24 AM

theconteDitiitableAttributeMakesyHtmLelementEdabledableddingContenteDibledable =“ true”,允许使用contostlymodifectlymodifycontentinthebrowser.2.itiscommonlysonlysedinrysedinrichedinrichtexteditors,note-placeedingingInterInterfaces,andIn-placeeditingInterfaces,supportingingingingingingingingingingingingingingingelementslementslementLikeDikeDivikeDiv

语义HTML对于SEO和可访问性的重要性 语义HTML对于SEO和可访问性的重要性 Jul 30, 2025 am 05:05 AM

semantichtmlimprovesbothseoandAccessibility formaningfultagSthatConveyContentsUrture.1)ItenhancesseothRoughBetterContterContenterContenterContenchyArchyWithProperHeadingLeheadinglevels,ifravedIndexingViaeLementLikeAnd,andsupportFortForrichSnippersingsundsustructussunddbuestussund.2)

HTML中链接标签中rel属性的目的是什么? HTML中链接标签中rel属性的目的是什么? Aug 03, 2025 pm 04:50 PM

rel =“ stylesheet” linkscssfilesfilesforstylingthepage; 2.rel =“ pRELOAD” hintstopreloadcritical ricationResourcesourcesorforperformance; 3.rel =“ icon” setSthewebsite’sfavicon; 4.Rel =“ 4.REL =“ necter” selfertAltate's supportAlternate'sporlateRateSlikerSsorsSorsorSorprint; 5.ReL; 5.REL; 5.REL = REL =&QU&QU&QU&QU

See all articles