002、Axure的表单元件

说说Axure的表单元件

第一部分

通俗的理解表单

所谓表单，就是承接用户输入的内容的元件，负责把用户的内容存储和传递。用户的输入形式有：文字输入、密码输入、邮箱输入、地址URL输入、文件上传、时间选择、选项确定等。

通用交互事件：获得焦点、失去焦点

由于用户输入内容时，需要在元件里操作，用户在操作时也就是元件获得焦点（即激活该元件，如文本框得把光标在文本框中闪烁，用户才能输入内容），当用户不操作该元件了，则该元件就失去焦点。

文末有源文件链接

通过元件焦点的获得和失去的变化，可控制其他元件的交互。如登录表单，账号输入框获得焦点，切换文本框外框线颜色。

文本框交互事件：文本改变时

用户输入内容时，是一个字一个字的输入的，对于文本框来说是一直在变化的，所以可通过该变化进行交互事件的设置。

原理：当文字长度有变化时，显示或隐藏提示的元件

文末有源文件链接

列表框的交互事件：选项改变时

用户切换选项时，列表框的值被改变，通过该变化进行交互事件的设置。

原理：当选项改变时，设置文本框的文字等于被选中项

文末有源文件链接

复选框和单选按钮的交互事件：选中时和取消选中时

原理：选中时，数量加1；取消选中时，数量减1。

文末有源文件链接

第二部分

详细说明以上的一个案例：验证手机号长度

01、准备好元件：两个提示“请输入11位数手机号”、正确符号，文本框，文本背景框。

02、设置文本背景框的选中状态和默认状态，当文本框获得焦点时切换背景框为选中状态，反之为默认状态。

03、设置提示为默认隐藏，给文本框添加事件。

04、到此便可完成了文本框验证手机号长度的效果制作，点击F5预览。

本文涉及的效果制作，源文件地址为：

https://pan.baidu.com/s/1vwvudPfMIkH2p4HlD6zKbw

来个硬广，作者自己整理的一套适用于移动端的元件库，有需要的同学可以前往看看。
灰色元件库链接地址：
https://www.axureshop.com/a/45563.html
橘黄元件库链接地址：
https://www.axureshop.com/a/352.html

文章来自微信公众号“木目原型”

微信ID：mumuaxure