今天主要总结下表单里的input输入框与select选择框,在总结之前,我们先来了解一下表单。
表单主要负责数据采集信息功能,通过用户填写表单输入数据提交到数据库。
一、input输入框
定义:
用于用户文本输入,并以字符串的形式提交到数据库。
状态:
输入框的状态有初始态、激活态、报错态、完成态、禁用态,如下
五种状态
输入框其它情况
其它情况
展示形式:
分为三类:1.左标题右输入框;2.上标题下输入框;3.不需要标题。
展示形式
三种展示方式存在状态的逻辑与规则在👆「状态」相同。
二、select选择框
定义:
用户通过选择枚举项,提交到服务器。后端存储为枚举项。选择器分为单选和多选两大类。
单选与多选
功能样式:
1.基础样式-简单的下拉菜单选择,不可进行关键字搜索。适合枚举项较少的下拉列表,无多余需求;
基础样式
2.可搜索样式-当鼠标点击时,浮出下拉列表,激活选项框可进行关键字搜索,下拉菜单内容事实更换。点击匹配的枚举项,枚举项替换关键字并且下拉列表消失。此样式适合枚举项过多的下拉列表。
可搜索样式
3.选择器搜索删除功能-有时候存在一个场景,用户选择了一个选项,但是后面想去掉选择的选项,不进行选择。可删除之前选择的枚举项。
删除之前枚举项
4.选择器多选组件-当用户在输入关键词中,选择对应下拉选项,则输入的字符串清空,同时出现该选项 tag。
选择器多选组件