网页设计表单是什么 第1篇
常见的处理包含子任务流程、内容项复杂的表单模式，相较于折叠面板扩展性更强，承载的信息更多，一般而言，抽屉的信息承载能力大于弹窗。模态的弹窗/抽屉会打断用户的当前主流程，任务的切割感强。
四、实际应用中的一些思考 1. 表单输入区的宽度要不要整齐划一？
很多设计师在拿到表单需求的时候，都会潜意识地追求视觉上整齐划一，强行将表单的宽度定为统一宽度。这种处理方式没有深入思考表单应用规范和用户填写感受。事实上有秩序的“不一致”也不一定要比“整齐”的视觉感受差。
每一类型的表单的输入区都会因其录入需求存在合理的宽度，输入区的宽度应该匹配和暗示其填写的内容。合理的输入区宽度，不仅能够给用户的输入量提供心理预判，还提升整个表单操作过程中的掌控感。
表单在B端项目的应用场景十分丰富且复杂，针对每一种场景去定制也是不现实的。怎么去兼顾美观和用户的使用体验呢？
结合Ant_Design的解决方案，我们可以定义一个基准输入区宽度和几个不同尺寸的输入区，其宽度按照一定的内在逻辑去生长扩展。例如：基准输入宽度XS = 128px，以其倍数 (n) 加上 (n-1) 倍的间距 (8px) 为规则，分为5种不同尺寸 (XS、S、M、L、XL)。
表单的外观视觉虽呈现错落有致，但在内在逻辑的约束下做到了“有秩序的不一致”。不仅解决了暗示用户输入量多少的问题，更是避免了设计师在面对表单时不必要的主观和感性，同时开发人员也更容易地做到对设计稿的精准还原。
2. 表单中的隐藏交互
网页设计表单是什么 第2篇
1）定义：表单域是一个包含表单元素的区域。
在 HTML 标签中，窗体顶端标签用于定义表单域，以实现用户信息的收集和传递。
窗体顶端会把它范围内的表单元素信息提交给 服务器.
2）语法格式：
3）相关属性：
1）定义：在表单元素中标签用于收集用户信息。
在 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段
拥有很多种形式。
属性值
描述
button
网页设计表单是什么 第3篇
aside
侧边栏
get post
发送表单数据常用值
readonly
只读属性
disabled
禁用属性
action
表示向何处发送表单数据：action=_目标网页_
type
指定元素的类型
name
指定表单元素的名称
value
元素的提交值：value(type为radio时必须指定一个值)
size
指定表单元素的初始宽度：size(type为text或passwork时,表单元素的大 小以字符为单位,对于其他类型,宽度以像素为单位)
maxlength minlength
输入的最大字符数和最小字符数(type为text或passwork时)： maxlength、minlength
checked
type为radio或checkbox时,指定按钮默认被选中
placeholder
input类型文本框内容提示(hint)：placeholder=_内容提示语_(提示语默认 显示,当文本框中输入内容时提示语消失)
required
规定文本框填写不能为空,否则不允许用户提交表单
pattern
用户输入的内容必须符合正则表达式所指的规则,否则无法提交表单 (pattern=_正则表达式_)： ①昵称：pattern=_[-\w\u4E00-\u9FA5]{4,10}_
先大致了解每个属性的作用，下面会详细解释到每个元素、属性的用法、作用、效果。
网页设计表单是什么 第4篇
标签位于输入区上方，字段与输入区左对齐。标签和输入区的亲密性强，“I”字型的视觉动线使得用户阅读、填写效果较高。对于标签字符长度大，尤其是外文标签，顶对齐表单的适应性更强。上下排列结构对页面的纵向空间有一定要求。
扩展：“I”字型视觉动线从上到下，“Z”字型视觉动线从左到右再从上到下。现实生活中，人们对于左右的反应要弱于对上下，很多人对于分辨左右方向需要一定的反应时间，但对于上下几乎是不假思索的。
网页设计表单是什么 第5篇
3. 按钮没有满足触发条件时要不要禁用？
当表单的内容项非常少 (≤3) 时可以使用主按钮禁用，用户输入内容按钮高亮，这种反馈很容易被捕捉到，也易于用户理解。当表单内容项多有必填和非必填同时存在的时候，此时主按钮禁用会使得用户产生疑问，过长的表单也使用户也不易捕捉到按钮反馈，此时可采用提交校验来对表单信息是否完整进行提示，不建议使用主按钮禁用。
4. 修改输入区的内容，要不要快速清除按钮？
修改表单输入区已填写内容时，有的会存在快速清除按钮 (如：密码输入框)，有的则没有，这是为什么呢？
这里的关注点其实还是个效率的问题，这里的效率不只是一个个清除和一键清除的对比，还要考虑到重新录入的效率。
面对一个需要修改的表单我们大概率会在清除后再次录入的，这时候就要考虑录入成本的高低。密码输入错误一键清除后，再次录入也会很快地完成，此时应该为了提高效率应该使用一键清除；而表单中若是我们精心编写的一段话，润色也花费了不少时间，清除后重新录入的的成本就会高很多，此时就应该谨慎提供一键清除。
判断是否需要一键清空按钮，首先需要判断修改成本的高低，低输入成本可以使用一键清空按钮，输入成本较高时，慎用一键清空按钮。
5. 表单设计小技巧
网页设计表单是什么 第6篇
也叫冒号对齐，标签位于输入区左侧，字段右对齐。
右对齐表单的标签和输入区之间的距离是固定的，标签和输入区之间有明确的视觉关联，两者之间的亲密性较高。相对标签简短的表单，用户阅读、填写的效率较高，但对于标签长短不一的多个内容项，左侧的参差不齐又会使得标签不易于完整阅读。横向排列结构对页面的横向空间有一定的要求。
网页设计表单是什么 第7篇
标签在输入前位于输入区类似占位符，输入中 (后)，标签向上移动并变小，节约了空间的同时，标签依然存在。
变小后的标签虽一定程度上降低了可视性，但也保障了用户录入信息的准确性和可复核性。与其他几种表单相比，开发实现的难度也相对应的增加了一些。
输入区是用户交互最多也是最能影响使用体验的区域，不同类型数据选择与之相应的录入方式，对提高表单操作效率和用户体验大有裨益。依据录入方式的不同可以分为：文本录入、选择录入、上传录入三种方式。
网页设计表单是什么 第8篇
在实际的应用场景中，有些表单的信息是可以根据已填写数据联想得到的，此时就应该让这些表单关联已填写的内容自动填写，从而提升整个表单的录入效率和使用体验。
例如：在填写一些与个人信息相关的表单时，输入身份证号后，像省份、出生年月、性别、户籍地址等可以从身份证号中关联到的信息就应该自动填写显示出来，让用户检查关联出的信息正确与否以及修改错误信息即可。
更多表单设计小技巧 详见第一篇文章《提升表单设计效果的18个技巧》
题图来自Unsplash，基于CC0协议
网页设计表单是什么 第9篇
在表单页面横向方向上放置两列或多列表单，这样的布局会让页面的利用率得到提升，但“Z”字型的视觉动线引导用户从左到右，再从上到下的阅读，会使操作效率和用户体验在一定程度上打折扣。
2. 分组表单（卡片分组）
适合于内容项较多，且不同内容之中存在明显相关性分类归纳的表单。
化繁为简是人处理复杂事物常用的方法，通过分组的方式，我们可以将一个较大的的任务分解为几个较小任务，化解表单在用户视觉上的重量，相邻小任务之间的间隔也相当于给用户设置心理休息点，降低用户面对大量录入时的心理压力。
3. 分步表单
适用于内容项复杂、有明确先后顺序的的表单内容，将其按照一定的逻辑关系组织成线性流程，利用步骤条告知用户完整流程和进度，当前流程只展示此流程下的表单内容，数据校验也在此流程结束时完成。也是将复杂表单任务切割，提高录入效率，提升用户体验的常用方式。
4. tab页签表单
适用于内容项复杂，且不同内容可以通过一定的逻辑进行分类归纳的表单内容，不同类别之间相互独立，用户可以切换不同类别浏览填写所有表单数据，表单footer区放置具有“完结”流程属性的操作按钮。也属于一种将复杂表单简单化的方案。
网页设计表单是什么 第10篇
标签位于输入域左侧，字段左对齐。
“I”字型的视觉动线更加符合现代人们的阅读习惯，阅读效率高的同时也利于用户对标签的整体浏览。但由于表单字段长短不一，造成部分标签和输入区之间的距离较大，从而降低了这些表单标签和与其对应输入区的亲密性，用户的录入的效率也会随之降低，横向排列对页面横向空间有一定要求。
任何事物都是具有两面性的，标签与对应的输入区距离过大会造成视觉断点，影响阅读的连续性，但有些场景需求就是需要引起人们注意，需要严肃、谨慎对待的时候，此时应用这种设计策略会达到较理想的效果。