当标签问题明确后，用户就可以按照标签要求，对问题做出回答，这时就会用到输入框了。表单中的输入框并不单指文本框，而是包含用户用来回答问题的所有输入组件，包括但不限于复选框、单选按钮、下拉菜单等

一.输入框类型

由于在表单设计场景下，我们经常会用到各类输入组件，为了让大家对这些组件的特性，以及工作原理有相应的理解，我们选取其中几个有代表性的组件进行讲解说明。

1. 单选按钮

在用户输入场景中，单选按钮的“出场率”较为高频。它通常被用在对两组或者两组以上的数据进行单项选中的事件中。使用这一组件时，需要特别注意，所有选项间必须为互斥关系，也就是选择只能在一个选项上发生。

标准态的单选按钮通常是一个空心圆，选中后空心圆中会出现一个同心圆点。但表单中的单选按钮设计样式并不固定，设计者可以根据视觉需要，定制个性化的单选按钮。

如图，一款网页产品的设置表单，使用了特殊样式的单选按钮

如图，一款订阅机票的网页表单设计，在对包裹重量的统计中，使用了特殊样式的单选按钮

2.复选框

复选框和单选按钮一样，同样可以被用于，在两组或者多组数据中执行选中。但与单选按钮的区别是，使用复选框的表单中，用户对数据选中的条数，可以为任意条数（但不能超出数据总量）

如图，在对音乐风格喜好设定中，允许用户同时选中多条数据

3.下拉菜单

当我们在表单设计中，为提供给选择的选项过多，我们可以使用下拉菜单组件完成设计，下拉菜单相较于单选按钮和复选框，可以有效节省表单空间占用。

如图，表单中，在对国家和电话号所属国别的选中中，由于数据量较多，且有国别扩展需求，所以上述表单使用了下拉菜单组件。

大多数情况下，下拉菜单的选项之间为互斥关系，选中只能在一个选项上发生。所以，在进行方案设计时，我们会将最可能被用户选中的选项，作为默认选中项提供给用户。这种设定的好处是，当默认选项设定得当时，用户可以直接跳过回答这些问题，从而快速完成表单填涂。

4.文本框

在文本框内执行输入，原则上允许用户输入任意字符，用户只要依照问题设定，给出答案即可。但有时为规范用户输入行为，设计者会对用户输入提一些要求，比如对字节个数的限定，以及数值属性的要求等。

如图，注册表单中，文本框内的引导文字对标签内容做了补充说明

二、必填和选填

在表单问题设定章节，我们曾提到过这样的观点：在问题设定时，尽量将那些”无关痛痒“的问题从表单任务中剔除，这样会提升用的填写效率。但在真实的设计场景中，仍然会有很多设计者，乐忠于向用户发问。他们会事先将问题选项进行归类，将那些必须要问的问题列为必填项，将那些可问可不问的问题设为选填项。那么对于用户而言，如何对这两类问题做出有效区分呢？

1. 文本示意

最为明确的设计传达方式，是在这些问题项后，跟随一个选填或者必填的文案注释。这样用户在阅读完标签文本后，即可获悉那些文本框必须要进行回答。

如图表单设计中，通过使用文本，示意用户此为必填问题

但这种设计方式会增加标签的长度，如果表单采用的是左对齐或者右对齐的标签结构，长标签很容易同文本框发生冲突。另外一方面，文本呈现也会让整体界面内容显得混乱，

如图，左对齐类型的表单设计中，因使用必填文本，而造成换行，文本的使用也会使页面信息显得混乱

随着表单设计的发展，一种区分选填和必填项的新方案被提出，那就是通过使用一个*号，来标记必填。

如图，适应星号后，页面显得更加规整了，红色星号也更加醒目

2.符号示意

用“*” 来表述必填项，目前在设计界几乎达成了共识，但在使用这一符号示意时，我们需要关注以下几点。

1. *作为必填项的共识，仅限于有相关表单填写经历的人有效，但不代表多对所有用户有效，所以使用*标识必填时，需要有个明确的图例注释，这个注释应该出现在表单页中比较”显眼“的位置，比如表单页的顶部（表单标题下，问题项上方的位置）。

2. 使用*号标识时，需要使用醒目的颜色，这样有助于用户识别。

3. *标识应该和标签相近，而不应该出现在输入框后。这是才能够保证，用户在阅读标签问题时发现它们。

如图，上述两种方案，均使用了标签后星号来示意必填项，用户在阅读完标签或是在作出回答时，很容易的发现它们

当然这种设定不仅限于使用符号*示意的场景中，即便是在使用文本示意的输入场景中，必填文本也需要在用户填写路径中，最醒目的位置呈现，比如标签后，或者输入框内。

如图，在文本输入框内使用文本标识出当前输入框的必填属性，由于是在框体内呈现，不容易被用户忽略

3. 数量关系

很多设计者在进行表单设计时，常常会陷入惯性思维陷阱，比如我们上面讲到，可以通过使用*号将必填项在表单中标识出来，于是我们就会见到下面这样的表单。

如图，表单中只有邮箱一项为选填，其余全部为必填项

通过选项数量统计，我们不难发现，需要用户必填的问题有5项，而选填的问题有1项，选填问题数远少于必填问题数。如果我们在表单中只标识出选填项是不是更加合理？用户可以通过这唯一的选填标识，清晰的获知其他选项的必填属性，如下图所示。

如图，优化后的方案只标识了选填项，页面整洁度提升了，同时用户也可以通过选填项，推测出其他选项为必填项

同样，我们在其他的表单设计中，也可以统计表单问题中的选填项和必填项的数量，当两者数量差距较大时，我们可以选择标识数量少的一方。

三、关联输入组

在表单设计时，我们经常会用到多组有关联关系的输入框组。这些输入框组按照关系紧密度，可以被归纳为3个类型

1.相关输入框

相关输入框是指，在对同一“事物”，不同纬度的信息采集。多个输入框体之间彼此独立，可以对应不同的标签。比如在英文表单中，对用户first name 和last name的采集

2.组合输入框

组合输入框是指，在回答同一个问题，使用两组或者多组输入框，输入框之间的数据彼此独立，互为补充。比如对于航班出发日期的选定，通常包含年、月、日、三个输入框彼此独立，共同组合回答同一个标签问题。如图所示

3.从属输入框

从属输入框是指，用于回答同一问题的两组或者多组输入数据间存在从属关系。当第一组数据（父组）发生选中变化时，后面输入框组（子组）也会跟随变化。

如图，通过选中专有版和托管版，可以进入到不同的基础配置表单页面

由于从属关系的输入框无法直观的向用户传递信息，选项层级的展示也充满不确定性。所以目前在主流的表单设计中，已经很少用到这种方案了。

四、弹性输入

在讲解弹性输入前，我们先聊一下规范化输入的话题。当我们为用户提供表单，让用户回答时，如果大量的输入框都使用文本框的话，显然会增加用户的填写负担。同时这种设计也会给我们的数据整理工作带来麻烦，由于用户填写的答案很难做到统一和规范，所以我们不得不花大力气对这些数据进行梳理和挖掘。

正是因为上述问题的存在，我们在表单设计时，会通过使用选项或者其他的处理方式，来规范用户的输入。

如图，节点配置表单中，设计者为用户提供了若干选项，以规范化用户的选择

这些处理方式尽管在一定程度上，减轻了用户的填写压力，同时降低了我们后台数据的统计和整理的压力，但在表单设计中，完全取代用户的文本输入，并不现实。

由于用户在填写文本时，我们很难预知用户会输入什么，我们只能通过一些限定条件来约束用户的行为（比如对字符数量的要求）。但即便如此，我们依然无法保证，用户给出的答案符合规范。

例如，当我们为用户提供一个电话号码输入框时，用户很可以会给出如下的答案

如果我们并没有给用户标准答案的输入要求，那么这些答案算不算正确？这些答案应该被直接丢弃，还是向用户报错？

在规范用户行为和保障用户输入体验的双重考量下，我们不得不要求，输入框具备一定的输入弹性，也就是输入框并不只接受标准答案，还应该接受多种类型的“有效答案”。

当然，输入的弹性并不仅限于对输入数据的有效性支持上。在回答标签问题时，有时我们会给用户提供多种完善途径，这些途径也属于输入弹性的考量范围。

如图，顺丰在用户地址录入时，不仅为用户提供了常规输入表单，还为用户提供了一个可识别大段文本的输入框。用户可以将包含个人信息的大段文字粘贴进去，然后通过识别按钮，一键完善所有信息。

五、小结

在本节的课程讲解中，我们讲到了输入框的组件类型，输入框并不是文本框，还包括其他的输入组件，比如单选按钮，复选框，下拉菜单等。这些组件可以用来单独回答问题，也可以搭配组，形成关联。关联的输入框组有三种类型：相关输入组、组合输入组、从属输入组。输入框组内的不同组件的亲疏关系，也各不相同。我们还讲到了输入框选项的选必填设定，提到了两种示意选必填关系的方案。

以下是我们本节课的知识总结，希望对你的设计实操有所帮助。

Design tips

1. 表单中的输入框包含多种输入组件：复选框、单选按钮、下拉菜单、文本框

2. 使用单选按钮时，需要保证选项间存在互斥关系，并且选中只能在一个选项上发生。

3. 复选框区别与单选按钮的是，用户可以在两组数据或者多组数据中执行选中

4. 如果提供给用户进行选择的选项过多，我们可以使用下拉菜单组件，下拉菜单相较于单选按钮，可以有效节省表单空间占用

5. 如果默认选项得当，将不需要用户进行任何操作，直接跳过即可。

6. 最为明确的向用户传递选填和必填的设计方式，是在这些问题的标签后添加选填或者必填文本即可。

7. 使用*作为必填项示意时，需要通过图例注释向用户进行说明。

8. 必填和选填需要出现在用户填写路径中最醒目的位置，比如标签后，或者输入框内

9. 统计必填和选填问题的数量，标识数量少的一方

11. 相关输入框是指，两组或者多组输入数据，对同一问题不同信息纬度的描述，数据间彼此独立

12. 组合输入框是指，两组或者多组输入数据，对同一问题的回答，数据之间可以看为一体。

13. 从属关系的输入框无法全面的向用户传递隐藏信息，选项层级的展示充满不确定性

14. 表单设计中，应尽量减少用户的输入，使用选项或者其他的处理方式，来规范用户的行为。

15. 如果表单中问题的答案于多个答案类型，我们可以考虑使用弹性输入框。