前言

数据录入是使用表单组件最多的场景, 我们将常用于此场景的组件分成三种: 文本录入,选择录入和文件上传。

文本录入最基本的是文本框，适合较少输入的字符，单行录入。当录入字符较多，超过一行时候，则会使用文本域 ,对于大多数的表单组件，我们都可以设置【提示和帮助】
选择录入中,最常见的是单选框和复选框,注意的是:单选框和复选框的数量有一定的限制，一般少于五个，如果选择的数量超过五个，则采用选择列表(select)
开关组件,需要注意的是用户切换开关按钮，将直接触发状态的改变，所以不应和操作按钮搭配使用
滑块选择: 在亮度,音量,色彩等需要反映强度等级的选项中,可以很直观表现区间,操作也非常便捷。但是需要注意一点:在要求精准数值的场景中, 改组件应该和数字输入框组合使用。

image.png

表单搭建流程

主要是三步:设计表单结构,设计表单元素,设计表单交互。我们举表单的例子

image.png

筛选问题
表单页面必然要向用户问很多问题，但是用户为什么要回答这些问题呢?用来表单页面往往是带着目的,而不是来思考和填写信息的, 越少的向用户提出问题越好。
卡罗琳贾勒特对表单问题的选取提出了四大策略：保留，删减，延迟,解释
保留必要的问题，删减或者延迟收集非必须的问题，对敏感的信息收集进行解释
归纳组织
有逻辑的对话,对方更原意投入
将上面表单进行分类组织

image.png

如果问题列表比较长,填写用时比较长，但是可以清晰分为几个主题。让填写进程更加清晰

image.png

如果把填写表单当成走路的话,一条有责任感的路最少有两个特性

image.png

人们并不会仔细阅读每个表单,所有解释工作很大落在表单名称上。
上面的例子，连表单名都没有,这也导致上面的问题:这是一条没有责任心的路，连头都没有。

image.png

image.png

第二种是高度28px的中等尺寸输入框，这个尺寸一般不用在纯表单页面，而是和其他组件搭配使用。比如放在列表顶部，与搜索或操作功能搭配，此时的表单不是页面的首要信息，功能是辅助性的，加上页面空间的限制，适合使用小一些的尺寸。

image.png

第三种是高度22px的小尺寸输入框，这个尺寸用得少一些，一般用在其他组件内部。比如表格编辑，因为表格组件本身有大小限制，放在组件内部的输入框小一些才不会太影响组件的整体效果。

image.png

我们来看下这些统一之后的样式

image.png

行高具有暗示的作用，告诉用户你可以填写多少的信息

image.png

输入框有二个特殊的情况就是placeholder, placeholder可以将标签放进输入框作为输入建议，但是在用户输入时，提醒会消失。当一些提示性比较强的情况,不要以placeholder形式
还有就是讲帮助放在输入框下面作为补充，这类的帮助一般超过一句话

image.png
最后一种就是隐形的输入帮助，放在输入框左侧或者右侧。需要用户hover才能看到，一般放输入时遇到障碍时帮助性的文字。但因为右侧的文字不会直接展示，要通过用户激活，不建议放特别重要的提示文字。

image.png