「整理」Web 端设计规范-Input与Select

今天主要总结下表单里的input输入框与select选择框,在总结之前,我们先来了解一下表单。

表单主要负责数据采集信息功能,通过用户填写表单输入数据提交到数据库。

一、input输入框

定义:

用于用户文本输入,并以字符串的形式提交到数据库。

状态:

输入框的状态有初始态、激活态、报错态、完成态、禁用态,如下

五种状态

输入框其它情况

其它情况

展示形式:

分为三类:1.左标题右输入框;2.上标题下输入框;3.不需要标题。

展示形式

三种展示方式存在状态的逻辑与规则在👆「状态」相同。

二、select选择框

定义:

用户通过选择枚举项,提交到服务器。后端存储为枚举项。选择器分为单选和多选两大类。

单选与多选

功能样式:

1.基础样式-简单的下拉菜单选择,不可进行关键字搜索。适合枚举项较少的下拉列表,无多余需求;

基础样式

2.可搜索样式-当鼠标点击时,浮出下拉列表,激活选项框可进行关键字搜索,下拉菜单内容事实更换。点击匹配的枚举项,枚举项替换关键字并且下拉列表消失。此样式适合枚举项过多的下拉列表。

可搜索样式

3.选择器搜索删除功能-有时候存在一个场景,用户选择了一个选项,但是后面想去掉选择的选项,不进行选择。可删除之前选择的枚举项。

删除之前枚举项

4.选择器多选组件-当用户在输入关键词中,选择对应下拉选项,则输入的字符串清空,同时出现该选项 tag。

选择器多选组件
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容