表单大全

单独拎出表单这章仔细做个读书心得，陷入第一章【导航】太久，该爬出来了。

表单主要用于数据输入，是排在导航后和观众见面的，并且和导航不同的是，

在表单环节，开始出现了信息交互，因此更加有挑战性。

曾经以为，表单就是把我们现实世界的表做成电子版，但要认识到，在移动应用时代，因为相对狭小的屏幕尺寸和受限的输入设备，这种思想下设计出来的表单，会劝退一批潜在注册者。

所以我们要兼顾实用、美观和一点点消费心理学，来精心打磨表单设计。

常用表单：登录（sign in）、注册（registration）、核对（check out）、计算（calculate）、搜索（search）、多步骤（multi-step）、长表单（long）

光说不练假把式，来写几个表单，技术栈 Vue + TailwindCSS。

登录表单

比起注册表单，登录表单应该只包括尽量少的信息输入，当然，别忘了加上取回密码选项。

登录表单

视觉上采用100度的浅灰色作为背景色，阴影设置为中等，稍加提示即可；

纵向分为三部分：用户名引导及输入、密码引导及输入、登录+忘记密码；

而当用户点击后，相应的输入框作出提示：

点击输入用户名后的表单

搜索

搜索框主要组成部分：输入框+搜索按钮+取消按钮（可选）

在按钮外侧划出边框，

未点击状态

而一旦监听到用户滑动或点击动作时，边框和字体颜色都跟着变深，引导用户做出动作。

点击状态

先挖个坑，改天来补。

所有项目的代码都是开源的，地址在：

https://github.com/lvbart/about-UI

欢迎尽情fork，提issue。