发布时间：2023-5-6 分类： 行业资讯
根据组件的目的，它可以分为六类，反馈反馈，表单形式，基本基础，数据数据，导航导航等。
表格主要负责网页中的数据收集;用户需要填写输入数据并将其提交给数据库，然后该组件就是表单类。
本文重点介绍表单中的文本和选择器，其中文本分为输入短文本，InputAutocomplete短文本关联和InputMultiline长文本。
首先，输入短文
定义：用于输入用户文本并以字符串形式提交给数据库。
使用场景：
当用户需要输入字符时。通过鼠标和键盘输入内容。您输入的文本通常放在输入框中。
例如，网易考拉优惠券兑换的形式是短文本输入组件，前面是标题，后面是文本输入框。
输入短文本组件的显示形式可以分为三类：
标题和输入框并排排列;标题和输入框上下排列;不需要安排标题。
当标题和输入框并排排列时，短文本组件存在于初始状态，活动状态，错误状态，完成状态和禁用状态。
常见的表单类型布局是左右排版，在表单之间，标题是左对齐的，输入框是左对齐的。有时如果标题名称太长，则排列左右都不够好。此时，您需要使用顶部和底部。
当标题和输入框上下排版时，在场状态和左右排列是相同的。
当没有标题时，存在与左和右相同状态的规则和逻辑。
二，InputAutocomplete短文本关联
定义：用户用于文本输入，匹配的文本选项与输入过程相关联，并作为字符串提交给数据库。
使用场景：
当用户需要输入文本时。提供Lenovo匹配文本以降低用户输入成本。在输入过程中，根据用户输入的内容，出现匹配选项，提交的数据是文本而不是枚举项。
例如，百度搜索，当在输入框中输入关键字时，将出现相应的关联匹配文本。
与输入短文本组件相比，InputAutocomplete短文本关联之间的唯一区别是添加了Lenovo匹配选项，并且文本提交不是枚举。
当标题和输入框并排排列时，InputAutocomplete短文本关联组件存在于初始状态，活动状态，错误状态，完成状态和禁用状态。
上下布置的状态和规则逻辑并排布置。
没有标题的状态和规则逻辑排列在左侧和右侧。
三，InputMultiline长文本
定义：用户用于长文本输入并以文本形式提交给数据库。
使用场景：
多段文本输入。需要包装。您输入的文本通常放在输入框中。
例如，新浪微博在输入框中发送微博时，是一个长文本输入，可以更改。
当标题和输入框排列在左侧或右侧时，InputMultiline长文本存在于初始状态，活动状态，错误状态，完成状态和禁用状态。在输入过程中，通常存在字数，其超过限制字数并且不允许用户输入。
顶部和底部逻辑和规则并排排列。
没有标题的逻辑排列在左侧和右侧。
第四，选择选择器
定义：用户通过选择枚举提交到服务器。后端存储为枚举。
使用场景：
弹出一个下拉选项供用户选择操作。当选项较少（少于5个项目）时，建议直接平铺选项，使用Radio是更好的选择。
例如，当淘宝卖家背景过滤订单状态时，单击选择器并显示下拉列表。这是一个常见的选择器，选择器分为两类：多选和单选。
下图显示了选择器的基本样式，这是一个简单的下拉选项。无法搜索关键字。
下图是一个可搜索的选择器，当输入框处于活动状态时，它会弹出一个下拉列表。在输入过程中，将显示匹配的枚举项，并且在单击枚举项时，将清除input关键字，并折叠下拉选项。将出现带有所选选项的选择框。
有时会出现一个场景，用户可以选择填写填写选项，然后需要一个空选项。
有时会有一个用户选择一个选项的场景，但后来想删除所选的选项而不进行选择。
选择器多选组件中需要注意的一点是，用户在输入关键字中选择相应的下拉选项，并清除输入字符串，同时显示选项标签。
