如何设计网页表单 第1篇
表单根据录入模式可以分为：单步表单、分步表单和高级表单
① 单步表单：
单步录入指的是在一个页面即可完成内容输入。使用于内容较少，结构简单的场景，我们常见的登录页就是典型的单步表单。
② 分步表单：
内容较多、录入内容的方式差异较大的情况且业务本身具有流程化特性，一般通过添加分步导航展示内容。常见的例如银行转账，修改密码等等。
③ 高级表单（分组表单）：
高级表单（分组表单）：主要用于需要一次性录入大批量数据的场景。高级表单与分步表单有点类似，都是为了减轻用户填写压力，将填写内容进行分块。不同的点在于，分步表单的流程化明显，后一步填写的内容都是基于前一步来填写、是前一步反馈。
如何设计网页表单 第2篇
在顶、右、左三种方案中，左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。在研究中，典型扫视时间为 500 毫秒，很长说明用户经历了沉重的认知压力。
优势：易浏览标签；占用纵向空间较少
劣势：标签和输入框距离较大，表单填写效率低
建议使用场景：需要让用户认真思考后填写的页面；更适用于整页式布局
如何设计网页表单 第3篇
表单的页面框架指的是承载着整个表单页的页面框架，即：整页式（新页面）、弹窗式、侧边栏式。因为其页面面积大小不一样，所以使用情境有所不同。
整页式（新页面）：最常用方式，适用于绝大部分的表单，可以支持构建复杂的表单。
我们在选择页面框架时通常需要综合以下三个因素去考虑：
如何设计网页表单 第4篇
根据不同的校验触发条件和报错方式，我们可以组合成以下几种校验形式：
① 输入时即时验证，即时报错
用户在输入的过程中进行实时验证，输入框处于聚焦时开始提示，随着输入的过程，符合要求后已与用户通过验证的反馈。例如在注册阿里云账号时，设置密码需要满足三个条件，这里采取了即时验证。
优点：可以实时告知用户表单的填写时候符合规范
缺点：实时验证会使用户分散注意力，也有可能会引起用户的反感
使用场景：注册时需要设置密码，通过密码不同的组成，时判断密码的强度，比如纯数字密码符合最低安全要求密码，但增加大些字母和小写字母后就形成了更安全的密码
② 失去焦点后即时报错
优点：为用户修改错误节省时间、避免出现很多错误需要改正的情况。
如何设计网页表单 第5篇
表格是网页中的一个重要容器元素，可包含文字和图像。表格使网页结构紧凑整齐，使网页内容的显示一目了然。表格除了用来显示数据外，还用于搭建网页的结构。几乎所有 HTML页面都或多或少地采用了表格。表格以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序地显示在页面上，从而可以呈现出漂亮的页面。表格在网页设计中能将网页分成多个任意的矩形区域。
表格的结构:
表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元。单元格的内容是数据，也称数据单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。
表格是网页文件中布局的重要元素，制作网页的过程中常常需要对网页中的表格做一些设置，对表格的设置实质是对表格标记属性的一些设置。
(1)border属性。用于设置边框的粗细，单位是像素。 (2)bordercolor属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和颜色英文名称。 (3) bordercolorlight属性。用于设置表格亮边框，对表格左上边框生效。(4)bordercolordark 属性。用于设置表格暗边框，对表格右下边框生效。
(1) width。其单位可以是长度单位或百分比，用于定义表格的宽度。
(2) height。其单位可以是长度单位或百分比，用于定义表格的高度。
(1)bgcolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色。
(2)background。设置背景图像，图像的路径可以是绝对路径或相对路径 。
(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。
设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部边框之间的距离。 (1) cellspacing值的单位为像素或百分比，默认值为2px。
(2) cellpadding值的单位为像素或百分比。
align属性的取值可以为left(默认居左)、center(居中)和right(居右)。
通过tr标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐、居中对齐和居右对齐。通过tr标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
（1）单元格跨行:使用单元格td标记的rowspan属性可以设置单元格跨行合并。
（2）单元格跨列:使用单元格td 标记的colspan属性可以设置单元格跨列合并。
表格嵌套是一种常用的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。通常情况下，使用表格嵌套时，表格不宜过多使用，否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格。
HTML中的表单是网页中最常用的元素，是网站服务器端与客户端之间沟通的桥梁。一个完整的交互表单由两部分组成:一是客户端包含的表单页面，用于填写浏览者进行交互的信息;另一个是服务端的应用程序，用于处理浏览者提交的信息，浏览者在表单中输入信息，然后将这些信息提交给服务器;服务器中的应用程序会对这些信息进行处理响应，这样就完成了浏览者和服务器之间的交互。
表单form标记为成对标记，以
利用 fieldset标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，feldset标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到Eieldset标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者可创建一个子表单来处理这些元素。legend标记为fieldset标记定义域标题。
表单的主要功能是为用户提供输入信息的接口，将输入信息发送到服务器并等待服务器响应。表单中输入信息的标记是input标记，可以输入一行信息。
设置input 标记的type属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据，但是输入的数据只能单行显示，不能换行。
设置input标记的type属性值为password，可以实现向表单中插入一个密码输入框。密码输人框中可以输入任意类型的数据，与单行文本输入框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“·”所取代，这样设计可以保障用户输入的密码不被泄露。
设置input标记的type 属性值为checkbox，可以实现向表单中插人一个复选框，用户科用复选框在网页上设置多项选择。
设置input标记的 type 属性值为radio，可以实现向表单中插人一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。
设置 input 标记的 type属性值为image，可以实现向表单中插入一个图像按钮，用户可利用图像按钮在网页中插入一张图像，通过src属性加载图像。
设置input标记的type属性值为submit，可以实现向表单中插入一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理。
设置input 标记的type 属性值为reset，可以实现向表单中插入一个重置按钮，重置按钮用于将表单中所有的输入信息清空，然后让用户可以重新填写。
设置input 标记的type 属性值为button，可以实现向表单中插入一个普通按钮。普通按注册件代码来实现所需的功能。
设置input标记的type属性值为file，可以实现向表单中插入一个文件选择框。
设置input标记的type属性值为hidden，可以实现向表单中插入一个隐藏框，用户提交表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的。
textarea标记可以向表单中插入多行文本输人框。多行文本输人框可以用来输入较多的文字信息，而且可以换行，并将这些信息提交到服务器。
下拉列表可以在表单中接收用户的输人。下拉列表通常需要同时使用select 和option标的自动换行，并以这种记来在表单中插入下拉菜单和列表项。
如何设计网页表单 第6篇
① 布局方式
在制作表单的时候分成两种排列方式：单列布局和多列布局。我们可以通过以下几个因素去考虑使用什么布局：
1. 在输入项不多的情况下，建议采用单列布局，因为单列布局，用户填写的路径就是从上至下的一条直线，十分符合用户的视觉动线，能够提高用户浏览与填写的效率。
2. 多列布局的表单会导致用户的视觉路径变长，用户需以 “Z” 字形的视觉动线扫描表单，会提高浏览与填写的效率，并且多列表单容易造成用户填写时的混乱，易填错，体验差。
但是有时部分业务诉求和某些特性的场景要求，会需要在有限的空间上放入更多的控件来收集用户的信息，这时就不得不使用多列布局的样式，因为多列能够省纵向空间。
如何设计网页表单 第7篇
为了让用户准确的填写表单，在用户填写表单中/填写表单后，常常会增加我们常说的“反馈提示“，针对反馈信息的准确性，我们会采用两种校验形式：前端校验和后端校验。
① 前端校验：
主要负责校验输入的内容格式是否正确；例如常见的手机号格式是否正确、密码格式是否符合要求。
② 后端校验：
与数据库相关，主要负责校验输入内容是否正确；例如常见的手机号是否存在，密码是否正确。
③ 校验触发条件：
④ 报错方式：