设计规范Web端设计组件篇文本与选择器

　　本文作者主要讲解表单中的文本和选择器，enjoy
　　根据组件的用途，可以分为六大类：Feedback反馈、form表单、basic基础、data数据、navigation导航、other其他。
　　表单在网页中主要负责数据采集功能；用户需要填写输入数据并且提交到数据库，则这种组件就是表单类。
　　本文主要讲解表单中的文本和选择器，其中文本分为input短文本、InputAutocomplete短文本联想和InputMultiline长文本。
　　input短文本
　　定义：用于用户文本输入，并以字符串的方式提交到数据库。
　　使用场景：
　　用户需要输入字符时
　　通过鼠标键盘输入内容
　　输入的文本通常置于输入框
　　例如网易考拉优惠券兑换的表单填写，就是短文本输入组件，前面是标题，后面是文本输入框。
　　input短文本组件的展示形式可以分为三类。第1类是标题和输入框左右排列；第二类是标题和输入框上下排列；第三列不需要标题的排列。
　　标题和输入框左右排列时，短文本组件存在的状态有：初始态、激活态、报错态、完成态和禁用态。
　　常见的表单类排版都是左右排版，同时表单之间，标题采用左对齐，输入框左对齐的情况比较多。有时候标题名字过长这样话左右排列就不够好，这时候需要采用上下排列。
　　标题和输入框上下排版时，存在状态和左右排列是一致的。
　　当没有标题时，存在状态同左右排列的规则和逻辑。
　　InputAutocomplete短文本联想
　　定义：用户用于文本输入，在输入过程中会联想匹配文本选项，并以字符串的方式提交到数据库。
　　使用场景：
　　需要用户输入文本时。
　　提供联想匹配文本，减少用户输入成本。
　　在输入过程中根据用户输入的内容，出现匹配选项，提交的数据是文本而非枚举项。
　　例如百度搜索，在输入框输入关键词时会出现对应的联想匹配文本。
　　和input短文本组件相比，InputAutocomplete短文本联想唯一的不同就是新增了联想匹配选项，并且提交的是文本而非枚举项。
　　标题和输入框左右排列时，InputAutocomplete短文本联想组件存在的状态有：初始态、激活态、报错态、完成态和禁用态。
　　上下排列的状态和规则逻辑同左右排列。
　　不含标题的状态和规则逻辑同左右排列。
　　InputMultiline长文本
　　定义：用户用于长文本输入，并以文本的方式提交到数据库。
　　使用场景：
　　多段文字输入
　　需要换行
　　输入的文本通常置于输入框中
　　例如新浪微博，在输入框发微博时，就是长文本输入，可以换行。
　　标题和输入框左右排列时，InputMultiline长文本存在的状态有：初始态、激活态、报错态、完成态和禁用态。在输入过程中一般有字数统计，超过限制字数，不允许用户输入。
　　上下排列逻辑和规则同左右排列。
　　不含标题的逻辑同左右排列。