首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在html中显示表单时使用表标签是不好的设计?

在 HTML 中显示表单时使用表标签(<form>)是一种不好的设计,原因如下:

  • 表单标签过于通用,无法提供有针对性的语义信息
  • 表单标签不能很好地与样式进行交互,会导致 HTML 的代码变得杂乱和不整洁

相比之下,使用语义化标记元素(例如 form、label、input、button)可以提供更清晰的布局,更好地呈现表单元素,提高代码的可读性和可维护性。

推荐的做法是通过 CSS 样式来布局和呈现表单元素,这可以使代码更加简洁,更容易维护,并且可以与浏览器引擎更紧密地配合。例如,可以使用 CSS 来定义 form、label、input、button 的位置和大小等样式属性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

2.语义化-HTML进阶

实际开发,很多时候我们需要为文本定义大小或字体加粗;那你是否曾想过用h1~h6来代替CSS? 使用标签来控制样式,一种错误做法。HTML关注结构(语义),CSS关注样式。...1.alt属性和title属性 img标签有2个重要属性:alt 和 title。 alt 属性用于图片描述,其中描述文字给搜索引擎看,并且当图片无法显示,页面会显示alt文字。...title 属性同样用于图片描述,但其中描述文字给用户看,并且当鼠标移动到图片上,会显示title内容。...legend标签 表单,我们可以使用fieldset标签来给表单元素进行分组,legend标签用于定义某一组表单标题。...4.del标签和ins标签 HTML,del和ins这两个标签配合使用: del:表示“ delete ”,用于定义被删除文本。

1.2K30

HTML入门与进阶以及HTML5_html 菜鸟教程

语法: 说明: 1表单都是使用input标签,所不同就是type属性值不同。...其实,除了 div和span外,还有一个label标签。div和span无语义标签,但label 有语义标签。label 只适用于表单,用于显示输入控件旁边说明性文字。 <!...1、alt属性和title属性 img标签有两个重要属性:alt和title。 alt属性用于图片描述,这个描述文字给捜索引擎看。并且当图片无法显示,页面 会显示alt文字。...title属性也用于图片描述,不过这个描述文字给用户看。并且当鼠标指针移到图片 上,会显示title内容。...Web Developer插件安装 和使用,请自行搜索,很简单。 6、HTML5舍弃标签 HTML5,除了新增标签之外,也有不少标签被舍弃了,如表1和2所示。

3.9K20

HTML基础入门

页面结构主体,包含在页面显示标签 :设置当前文档使用标准,建议使用HTML5类型, HTML标签:用于包裹页面上所有的其他标签 head标签:用于存放title,meta,base,style,script,link...--注释内容-->:HTML注释,给代码添加代码说明性文字,或者使一些没有必要去掉它作用 语义化:指用合理HTML标签以及特有的属性去格式化文档内容   三、HTML标签   1,基本标签 不加标签纯文字也是可以...span标签(最常用),没有语义标签 div布局标签 页面上单独独占一行,如果不设置宽度,默认占一行,通常作为容器布局时候使用 span标签 一行可以放多个,显示大小由内容决定   4,img标签...,注意和id区别 value:表单提交对应项值   button,reset,submit,value为按钮上显示文本内容   text,password,hidden,value为输入框初始值

1.3K42

使用腾讯云服务器建立一个PHP收集表单

进行操作前,请确保服务器已经安装web服务,并安装PHP7.0及以上版本,本文Linux系统下进行演示操作,Windows下同理。本文需要对HTML/CSS,PHP,和数据库有基本认识。...HTML代码form表单里面视情况增加或者删除栏位PHP代码<?...POST获取POST方法传输数据,"username"在前端页面,Name值为username标签值,下面的代码如法炮制,都一样。...,我们需要格外注意,如设计不好,数据类型有误,都会造成数据上传提交错误。...以上我提交数据我设计全部为字符串,写入数据库使用varchat类型下图为设计结构,图片注意UID,这里UID作为主键存在,但在收集表单可以不存在,UID为设定为自增,其他字段我们设定为

26340

HTML入门与进阶以及HTML5

语法: 说明: 1表单都是使用input标签,所不同就是type属性值不同。...其实,除了 div和span外,还有一个label标签。div和span无语义标签,但label 有语义标签。label 只适用于表单,用于显示输入控件旁边说明性文字。 <!...1、alt属性和title属性 img标签有两个重要属性:alt和title。 alt属性用于图片描述,这个描述文字给捜索引擎看。并且当图片无法显示,页面 会显示alt文字。...title属性也用于图片描述,不过这个描述文字给用户看。并且当鼠标指针移到图片 上,会显示title内容。...Web Developer插件安装 和使用,请自行搜索,很简单。 6、HTML5舍弃标签 HTML5,除了新增标签之外,也有不少标签被舍弃了,如表1和2所示。

3K30

HTML入门与进阶以及HTML5

语法: 说明: 1表单都是使用input标签,所不同就是type属性值不同。...其实,除了 div和span外,还有一个label标签。div和span无语义标签,但label 有语义标签。label 只适用于表单,用于显示输入控件旁边说明性文字。 <!...1、alt属性和title属性 img标签有两个重要属性:alt和title。 alt属性用于图片描述,这个描述文字给捜索引擎看。并且当图片无法显示,页面 会显示alt文字。...title属性也用于图片描述,不过这个描述文字给用户看。并且当鼠标指针移到图片 上,会显示title内容。...Web Developer插件安装 和使用,请自行搜索,很简单。 6、HTML5舍弃标签 HTML5,除了新增标签之外,也有不少标签被舍弃了,如表1和2所示。

4.7K30

HTML初学

写在前面:推荐初学者w3school上学习 ❤w3school快捷通道❤ ————————————————————————— Web标准构成三部分: 结构 :HTML 表现 :CSS 行为:..." title = " " width = " " height = " "> 属性介绍: 1. src 显示图像URL 2. alt 图像替代文本(图片无法显示显示alt文本)...:左上原则 跨行合并使用rowspan属性 跨列合并使用colspan属性 表单 表单使用form标签包裹。...直接使用lable标签把内容(如文本)和表单标签一起包裹。...3.name 属性用于对提交到服务器后表单数据进行标识 4. value 为input元素设定值(默认值) 输入框值 选项值 按钮上文字 5.checked 页面加载应该被预先选定单选和复选选项

3.2K40

Web-第二天 HTML表单&CSS【悟空教程】

第1章 网站用户注册页面显示 1.1 案例介绍 所有的html标签表单标签最重要实际开发,最经典实例就是用户注册,覆盖了表单标签所有的元素。效果图如下: ?...1.2 相关知识点 本案例中使用标签如下: 1.2.1 表单相关标签 1.2.1.1 表单标签表单标签html页面创建一个表单...内嵌式CSS样式只对其所在HTML页面有效,可以对多处标签统一设置样式,因此,仅设计一个页面使用内嵌式个不错选择。...3) 外部样式 外部样式又称为链入式,将所有的样式放在一个或多个以.css为扩展名外部样式文件,通过标签将样式连接到HTML文档。 标记链接多个CSS样式。 优先级 ?

4.2K40

前端学习自学笔记:day03

占位符(placeholder)用户文本输入框预先输入内容。...button(按钮),例:this button submits the from 注意:当你设计表单,你可以指定某些选项为必填项(requied),只有用户填写后方可提交表单。...-复习:link标签:链接外部样式: ] 例: 内部样式:当单个文件需要特别样式,就可以使用内部样式。你可以 head 部分通过 标签定义内部 样式。...例: body p 内联样式:当特殊样式需要应用到个别元素,就可以使用内联样式。 使用内联样式方法相关标签使用样 式属性。样式属性可以包含任何 CSS 属性。...语法: 文本 例: 首先,我们 HTML 文档对锚进行命名(创建一个书签):基本操作事项 - 有用提示 然后,我们同一个文档创建指向该锚链接:有用提示 您也可以在其他页面创建指向该锚链接

1.9K50

CSS小技能:常用样式属性、选择器分类、盒子模型

前言 CSS(cascading style sheets,层叠式样式)一种用来表现HTML 或XML 等文件样式计算机语言,CSS文档以.css作为后缀 。...CSS简化了网页格式代码,外部样式还会被浏览器保存在缓存里,加快了下载显示速度,也减少了需要上传代码数量。...--不推荐此方式,因为一个站点里,需要更改 CSS 修需要改每个页面文件。--> 内联样式存在于 HTML 元素 style 属性之中,每个 CSS 只影响一个元素。...“盒子”基本原理,我们使用 CSS 实现准确布局、处理元素排列关键。...这在创建类似整个页面滚动过程总是处于屏幕某个位置导航菜单非常有用。

1.5K10

Form 表单 问题多多(上)

HTML5学堂 - 刘国利:2013年8月,曾在给学生讲解WEB前端开发HTML和CSS基本知识,学生要面对“表单制作。我喜欢把“表单”称之为初入前端的人“恶梦”。...本篇博文当中主要内容 form标签必不可少 form标签嵌套规则 关于fieldset以及legend标签 form标签基本属性 form标签必不可少 标签用于为用户输入创建 HTML...首先,编写WML页面的时候要考虑到设备屏幕很小。如果试图想把一个大form一个屏幕里面显示,就要指定那些标签保持一个屏幕。那么fieldset标签将这些标签捆绑在一个屏幕上。...但在某些页面我们不希望让fieldset和legend默认样式或默认布局影响设计方案美观。...来实现,因此很多大网站不存在fieldset标签~ form标签基本属性 标签当中,必须出现action,最好也注明“method” action规定当提交表单,向何处发送表单数据

1.6K100

前端面试题-每日练习(3)

canvasHTML5新增一个HTML5标签与操作canvasjavascript API,它可以实现在网页完成动态2D与3D图像技术。...(2)、 get 把参数数据队列加到提交表单 ACTION 属性所指 URL ,值和表单内各个字段一一对应, URL 可以看到。...post 通过 HTTP post 机制,将表单内各个字段与其内容放置 HTML HEADER 内一起传送到 ACTION 属性所指 URL 地址 , 用户看不到这个过程。...(*)>继承样式 (4)、具体 > 泛化,特殊性即css优先级 (5)、近 > 远 (内嵌样式 > 内部样式 > 外联样式) 内嵌样式:内嵌元素,span 内部样式页面样式...(2)浏览器兼容问题二:块属性标签float后,又有横行margin情况下,IE6显示margin比设置大 问题症状:常见症状IE6后面的一块被顶到下一行 碰到频率:90%(稍微复杂点页面都会碰到

13420

关于无障碍设计七件事

你所设计产品有没有做到设计上做好无障碍准备呢?如果你设计不好,很可能会导致有障碍的人群使用产品遇到麻烦。...使用颜色突出显示或补充显示那些已经很明显东西。 在下面的例子,页面以灰度显示,你可以说出有哪些字段处在错误状态? ? 大多数人一眼能看出“验证码”字段(最后一行“Code”)处在错误状态。...没有重置样式不同设备和浏览器之间构建一致体验会很困难。 但是,就是因为重置样式互联网上导致了大面积无障碍设计缺陷。...当焦点在输入框内,如今常见用“占位文本”来替代标签一种不太好做法。占位文本通常对比度不高。在下面的7个例子,只有一个满足上文第4点提到4.5:1比例。 ?...下面另一个Evernote例子。这是笔记列表视图。当用户鼠标悬停在一行,会出现四个可操作图标。 ? 在这个例子,怎么始终显示四个图标呢?

3K30

前端系列教学 - HTML基础

但是 HTML5 标签已经不再被推荐使用,所以只要作为了解就好,使用还是选择吧。...align="left":靠左 align="center":居中 align="right":靠右 合并行rowspan: 设计表格,有时候根据需求,我们需要进行“合并单元格”。...使用前面讲到标签,我们综合创建一个表格: ### 表格语义化: 为了加强表格语义化,HTML 引入了,,三个标签。将表格分为:表头,身,脚。...## 表单 平时浏览网页,我们经常会遇到表单。例如:登录,注册账户,发表评论,做问卷调查,等等。...提交按钮点击后,可以将表单内容提交到服务器; 重置按钮点击后,可以重置当前表单内部表单元素; #### 标签 前面我们看到按钮标签实现。

7.1K110

01.前端之HTML

它们之间内容不会在浏览器文档窗口显示。包含了文档元(meta)数据,配置信息等,给浏览器看,你看到body标签里面写。 、 定义了网页标题,浏览器标题栏显示。...html文件可以pycharm ? 这个位置就能打开,你会发现地址栏种file:///这也是一个协议,浏览器打开自己本地文件协议。...body内常用标签HTML重点) 基本标签(块级标签和内联标签) 不加标签纯文字也是可以body加粗斜体下划线删除段落标签<...) 内容 对应代码 空格(html默认显示空格,也就是说通过空格键加了空格也没有多个空格效果,加多少个都是显示一个空格效果,需要这些特殊字符才能显示出空格效果) > > < < & & ¥...但是这样并不好,因为url显示了你信息,并且如果内容很多的话,你地址栏不能够输入那么长内容,为什么会默认拼接到url里面呢,因为form表单默认get请求提交内容,我们可以改为post,来看看

1.1K20

前端之HTML内容

一、HTML介绍 1、Web服务本质   当我们浏览器输入一个url后打开一个页面这个过程实质一个网络编程sockt服务端接受指令并发送指令一个过程。...设计HTTP最初目的是为了提供一种发布和接收HTML页面的方法。...2、HTML 超文本标记语言(Hypertext Markup Language, HTML一种用于创建网页标记语言,使用标签来描述网页,它不是一种编程语言。...DOCTYPE>声明必须HTML文档第一行,位于标签之前。 声明不是HTML标签,它是指示web浏览器关于页面使用哪个HTNL版本进行编写指令。...表单一般用来收集用户输入信息 表单工作原理: 访问者浏览有表单网页,可填写必须信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上。

2.4K90
领券