网页设计如何设置表单 第1篇
表单根据录入模式可以分为：单步表单、分步表单和高级表单
① 单步表单：
单步录入指的是在一个页面即可完成内容输入。使用于内容较少，结构简单的场景，我们常见的登录页就是典型的单步表单。
② 分步表单：
内容较多、录入内容的方式差异较大的情况且业务本身具有流程化特性，一般通过添加分步导航展示内容。常见的例如银行转账，修改密码等等。
③ 高级表单（分组表单）：
高级表单（分组表单）：主要用于需要一次性录入大批量数据的场景。高级表单与分步表单有点类似，都是为了减轻用户填写压力，将填写内容进行分块。不同的点在于，分步表单的流程化明显，后一步填写的内容都是基于前一步来填写、是前一步反馈。
网页设计如何设置表单 第2篇
在实际的网页开发中通常采用post方式提交表单中的数据
radio：单选按钮
name：如果是一组，那么取相同的name
对于radio，value是必须的
checked:单选按钮默认选中的状态
checkbox：复选框
name：一组复选框有相同的name
value：值
checked：复选框默认选中状态
select：列表框
option：选项
value：表单提交的选项的值，如果不写默认提交option中的类容
selected：默认选中项
图片按钮
submit：提交按钮
reset：表单重置按钮
image：图片提交按钮
button：普通按钮，天生不具备任何功能，可通过js赋予功能
textarea：多行文本域
cols：显示的列数
rows：显示的行数
file:文件域
enctype=“multipart/form-data”：如果要上传文件必须加。它表示表单编码属性
type如果指定是email，会自动验证email地址格式是否正确
type指定是url，会自动验证url地址格式是否正确
number:表示是数字输入框
min：最小值
max：最大值
step：步进（每次加/减多少）
range：滑块
min：允许的最小值
max：允许的最大值
step：合法的数字间隔
search
表单在提交的时候需要提交，但是又不希望被用户看到，这样就需要用到隐藏域
type=hidden
readonly：只允许读，不允许修改
disabled:表示禁用
增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上
标签的for属性应该与表单控件的id属性值相同，以此来建立与表单控件之间的关联。如果元素直接包含了表单控件（如），则不需要使用for属性，因为关联是隐式的。
表单验证好处：
减轻服务器的压力
保证数据的可行性和安全性
用户输入内容必须符合正则表达式所指的规则，否则不能提交表单
网页设计如何设置表单 第3篇
研究中，从标签移动到输入框只需 50 毫秒。比左对齐标签快了 10 倍，后者需要 500 毫秒；比右对齐标签方式快 2 倍，后者高达 240 秒。能迅速填完顶对齐标签表单的原因之一，是因为眼球只需要在标签和输入框之间进行上下单向运动。
优势：眼动测试中移动速度最快，最有利于提高用户填写表单的效率。标签字数相比于左右对齐标签可容纳更多字数。
劣势：纵向空间占用率高，对于小屏用户不太友好（设计前需要考虑用户使用场景以及使用设备）
建议使用场景：希望用户快速完成表单；对标签的扩展性高，有国际化需求（中文转英文，英文会比较长）；更适用于弹窗式、侧边栏式布局。
网页设计如何设置表单 第4篇
在顶、右、左三种方案中，左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。在研究中，典型扫视时间为 500 毫秒，很长说明用户经历了沉重的认知压力。
优势：易浏览标签；占用纵向空间较少
劣势：标签和输入框距离较大，表单填写效率低
建议使用场景：需要让用户认真思考后填写的页面；更适用于整页式布局
网页设计如何设置表单 第5篇
基础表单中会有以下六个元素：
1. 标签：标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解；还有一部分是告知用户哪些是必填项。
2. 占位提示：直接展示在输入项中，采用弱提示文本对所需信息描述，当用户输入信息时即消失。
3. 校验：对输入项进行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等
4. 基础组件：可交互输入的区域，是构成表单的核心内容，主要有：输入框、单（复）选框、上传、时间选择器、开关……
5. 提示：描述该输入项需要的输入类型，如：上传的文件类型
当我们开始制作某一表单的时候，我们需要强迫自己思考一下每个元素的 UI 问题：
网页设计如何设置表单 第6篇
表单的页面框架指的是承载着整个表单页的页面框架，即：整页式（新页面）、弹窗式、侧边栏式。因为其页面面积大小不一样，所以使用情境有所不同。
整页式（新页面）：最常用方式，适用于绝大部分的表单，可以支持构建复杂的表单。
我们在选择页面框架时通常需要综合以下三个因素去考虑：
网页设计如何设置表单 第7篇
标签位置：单从效率角度看，顶对齐>右对齐>左对齐，但是根据应用场景，效率快并不是我们选择标签对齐方式的唯一的指标。在大多数情况下，将标签放在输入字段上方效果更好，顶对齐的情况下标签的扩展性更高，且用户不会被迫分开查看标签和输入字段。需要注意在视觉上将下一个输入字段的标签与前一个输入字段分开。
粗体标签：阅读粗体标签对用户来说有点困难，因此最好使用纯文本标签。但是，当使用粗体标签时，可能希望将输入字段设置为没有粗边框。