我是怎样做产品的-web表单

    表单包含了标签、输入框、动作、帮助文字、输入反馈五个元素。其中标签告诉用户表单的问题是什么；输入框供给用户填写信息；动作主要是用户提交表单，即用户点击一个按钮或链接，执行一个操作；帮助文字给用户填写表单的给予提示信息；输入反馈是针对用户输入给出反馈，输入正确或是错误。

   由于表单在产品设计中较为基础，很多同学会忽略一些细节问题。在开发过程中会发现，前端同学不断向你确认效果；后端同学找你要非法的提示；测试用例要根据最新的产品文档做修改。所以就算是小小的表单，产品汪也可以往细了去定义，越细就越想得多，越想得多，产品就越健全。

    上一篇和大家分享了web登录的设计www.jianshu.com/p/438777990b28，本文主要分享一下我是怎么做web端的基础表单，多偏于一些细节问题，希望能为刚入门的产品同学们提供一些帮助。

    1 输入框的6种状态

    表单的基本元素为输入框，动作和校验是给予输入框的内容。输入框主要包含了6种状态：初始、悬停、焦点、禁用、错误、成功。初始状态可以为一个基础的空白输入框，也可以在输入框内部添加浅色的提示文字，比如“请输入”、“请选择”，也可以在输入框中添加一些icon，增强输入框功能的区分度。初始状态为输入框的默认状态，未进行任何的编辑；悬停状态为鼠标悬停在输入框区域，交互方式可改变边框颜色等；聚焦状态是鼠标聚焦输入框执行输入操作动作，交互方式可改变边框颜色增加外部阴影等；禁用状态是不允许对输入框进行编辑；输入错误是输入内容的格式不合法时的状态，可用红色边框加阴影体现，需要展示错误提示，提示文案可以在输入框右边，下方或者toast的提示形式；输入正确则为输入内容合法的情况下的状态。

输入框的6种状态

    2 表单验证

    输入框会一般用于表单的创建、编辑或者内容搜索等功能。如果是表单创建、编辑的功能一般涉及表单校验。校验的交互方式主要总结为如下三种，可根据不同场景设计不同的交互方式。

校验交互说明

    表单校验的流程可总结为：是否为必填项 -> 格式是否正确（长度、特殊字段格式比如邮箱、电话等） -> 是否唯一，非法输入时该输入框呈现错误状态，并在输入框下显示错误提示文案。下面用常用的几个字段组成一个创建用户信息的界面来说明产品文档怎么撰写，涉及常用的姓名、电话、邮箱、网址、开关等的校验。

创建用户信息 输入框校验说明

    3 输入框输入内容后

     3.1 输入框增加清空的后缀

    在输入框的设计中发现，输入框输入内容后如果还得聚焦输入框一个字一个字物理键删除的话，操作就过于繁琐了，因此我们可以在输入框输入内容后增加一个清空的后缀，一键清空输入内容，不管是在鼠标聚焦、鼠标悬浮或者输入正确或成功状态都会有一个清空按钮。

输入框写入内容后增加清空按钮后缀

    3.2 文本输入框的显示

    若文本输入框为单行或固定行，输入超过一行或固定行的内容显示一般可采用省略号“…”截断，通过移动光标的方式显示剩余内容；若输入框可根据输入内容自适应高度，那么输入框可全量显示输入内容；输入框如果做了字数限制，可以直接在多行输入框右下角实时显示输入的字符个数，超过字数不允许输入。

输入文本框域 输入框文本域说明

    以上校验的文案说明仅为个人常用的一般设计套路，可适用其他系统，但并不适用所有系统。具体文案得根据具体系统灵活切换。后续会陆续总结更新做产品的一些方法或想法，希望能给刚入坑的小伙伴们予以一点帮助。