1、第10章 表单A x u r e R P 8 交 互 原 型设 计 案 例 教 程在默认的元件库中专门有一类表单元件，如图10-1 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.1 10.1 表单基础表单基础10.1.1 认识表单元件图 10-1 表单元件库表单元件与其他元件的创建方法相同，只要用鼠标将相应的表单元件拖曳到页面中即可。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.1 10.1 表单基础表单基础10.1.2 创建表单元件文本框主要用于填写文本信息，另外它还可以用于搜索文字和上传文件等。1.文本框类型在页面中选择文本框元件后
2、，在右侧的【属性】子面板中可以看到文本框的类型，如图10-2所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.2 10.2 管理表单管理表单10.2.1 文本框图10-2 数字类型的文本框【查找】相当于搜索功能。例如，京东网上的搜索文本框，如图10-3 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.2 10.2 管理表单管理表单10.2.1 文本框图 10-3 京东网上的搜索文本框【文件】相当于发送邮件时的上传附件功能，如图10-4 所示。【日期】可以输入日期，也可以单击右侧的按钮添加日期，或者单击最右侧的按钮，从弹出的日期列表中选择
3、日期。【月份】与日期相似，只是缺少了天数，只有年和月。【时间】可以直接输入小时数和分钟数，也可以单击右侧的按钮输入小时数和分钟数，如图10-5所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.2 10.2 管理表单管理表单10.2.1 文本框图 10-4 上传文件类型的文本框 图10-5 时间类型的文本框2.文本框其他属性【提示文字】载入页面时，在文本框中默认以灰色显示的提示文字，如图10-6 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.2 10.2 管理表单管理表单10.2.1 文本框图 10-6 提示文本【提示样式】如果要改变默
4、认的灰色提示文本，则可以单击“提示样式”超链接进行设置，如图10-7 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.2 10.2 管理表单管理表单10.2.1 文本框图 10-7 提示样式选项多行文本框与文本框最大的不同在于：多行文本框可以输入多行文字，当在浏览器中输入的文本超过多行文本框的宽度时，文字会自动换行；如果按回车键，则可以重新开始一个新的段落，如图10-8 所示。多行文本框通常在网络调查时用于搜集一些建议和意见，如图10-9 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.2 10.2 管理表单管理表单10.2.2 多行
5、文本框图 10-8 多行文本框图10-9 多行文本框用于搜集建议和意见下拉列表框从外观上看有点像文本框，但是下拉列表框只能允许用户从列表中选择某个选项，而无法填写信息。该元件一般用于选择某项信息。例如，选择用户的籍贯或者出生日期等，如图10-10所示。向下拉列表框中添加数据的方法是：选择下拉列表框后，在【属性】子面板中单击“列表项”超链接，如图10-11 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.2 10.2 管理表单管理表单10.2.3 下拉列表框图 10-10 下拉列表图10-11【列表项】超链接在打开的【编辑列表选项】对话框中单击【添加】按钮，即可添加
6、一个列表项，如图10-12所示。如果要同时添加多个列表项，则可以单击【添加多个】按钮，在弹出的对话框中输入一个列表项后，按回车键换行再输入第二个列表项，重复此操作就可以添加多个列表项了，如图10-13所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.2 10.2 管理表单管理表单10.2.3 下拉列表框Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.2 10.2 管理表单管理表单10.2.3 下拉列表框图 10-12 添加列表项图10-13 同时添加多个列表项在【编辑列表选项】对话框的顶部还有一排针对列表项的按钮，分别是【添加】、【上移】、【
7、下移】、【清除】、【清除全部】，如图10-14 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.2 10.2 管理表单管理表单10.2.3 下拉列表框图 10-14 编辑列表选项按钮列表框与下拉列表框的区别在于：列表框是通过滚动条来显示隐藏的选项的，而且允许用户同时选择多个选项。向列表框中添加数据的方法与下拉列表框相同：选择列表框后，在【属性】子面板中单击“列表项”超链接，在打开的【编辑列表选项】对话框中单击【添加】按钮，即可添加一个列表项，单击对话框中的【添加多个】按钮可以同时输入多个选项。另外，在【编辑列表选项】对话框中，还可以设置默认选中项，如果允许用户选择
8、列表中的多个选项，则只要勾选底部的【允许选中多个选项】即可。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.2 10.2 管理表单管理表单10.2.4 列表框该元件主要用于从多个项目中选择一个或者多个选项，与列表框的功能有些类似，平时我们在网上遇到的多项选择题主要就是用这种元件制作的。在【属性】子面板中，可以设置复选框的相关属性。例如：勾选“选中”选项，可以使复选框在页面预览时自动处于选中状态。默认状态下，复选框位于文本的左侧位置，使用【属性】子面板的“对齐按钮”选项，可以让复选框放置在文本的右侧。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.
9、2 10.2 管理表单管理表单10.2.5 复选框默认状态下，在页面中创建了多个单选按钮后，预览网页，会发现虽然是单选按钮，但仍然可以选择多个选项。这是什么原因呢？原来，如果要实现一组单选按钮的单选效果，必须将一组单选按钮都设置为同一组。具体操作方法是：选择同一组的所有单选按钮，然后在【属性】子面板中输入单选按钮组的名称，如图10-15 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.2 10.2 管理表单管理表单10.2.6 单选按钮Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.2 10.2 管理表单管理表单10.2.6 单选按钮图 1
10、0-15 指定单选按钮组名称提交按钮元件主要用于提交通过上述表单元件获取的数据。与基本元件库中的按钮元件不同，提交按钮的样式是无法更改的，也无法通过【设置文本】动作更改提交按钮的文字，但是可以直接修改提交按钮上的文字。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.2 10.2 管理表单管理表单10.2.7 提交按钮文本框和多行文本框的事件内容相同，如图10-16 所示。下拉列表框和列表框的事件的内容也相同，如图10-17 所示。复选框和单选按钮的事件内容相同，如图10-18 所示。提交按钮的事件最少，只有6 个，如图10-19 所示。Axure RP 8 交互原型设计
11、案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.1 关于表单事件Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.1 关于表单事件图 10-16 文本框和多行文本框事件图 10-17 下拉列表框和列表框事件Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.1 关于表单事件图 10-18 复选框和单选按钮的事件图10-19 提交按钮的事件这是文本框和多行文本框表单专有的事件，表示当文本框中的文本改变时导致产生某种结果。例如，在文本框中输入文本时
12、，显示在其他地方的文本提示将被隐藏。下面以一个小案例进行说明。（1）在页面上创建一个文本框元件和文本标签元件，如图10-20 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.2【文本改变时】图 10-20 创建元件（2）选择文本框元件，在【属性】子面板中双击【文本改变时】事件，在弹出的对话框中添加一个【隐藏】动作，在右侧选择隐藏的对象，如图10-21 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.2【文本改变时】图 10-21【文本改变时】事件设置（3）
13、完成后，按【F5】键预览网页。在浏览器中载入页面时，文本框上方会显示文本提示；在文本框中输入文字时，上方的提示文本被隐藏，如图10-22 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.2【文本改变时】图 10-22 预览【文本改变时】事件下面以一个小案例来学习【选项改变时】事件的使用方法。（1）在页面中创建图10-23 所示的4 个元件对象。（2）双击下拉列表元件，在打开的【编辑列表选项】中添加问号、加、减、乘、除5 个符号，如图10-24 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3
14、10.3 表单事件表单事件10.3.3【选项改变时】Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.3【选项改变时】图 10-23 创建的4 个元件图10-24 添加的列表项（3）选择下拉列表框元件，在【属性】面板中双击【选项改变时】事件，在打开的对话框中添加【获取焦点】动作，在【配置动作】栏中选择文本框元件，勾选底部的【在文本域或文本区选择文本】，如图10-25 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.3【选项改变时】Axure RP 8 交互原型设计
15、案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.3【选项改变时】图 10-25【选项改变时】用例设置按【F5】键预览，默认状态下，文本框元件没有获取焦点，如图10-26 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.3【选项改变时】图 10-26 载入页面时的效果当选择相加运算方式后，后面文本框就会获取焦点了，如图10-27 所示。输入答案“100”后，将运算改为减法时，会自动选中文本框中的文本，如图10-28 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3
16、10.3 表单事件表单事件10.3.3【选项改变时】图 10-27 文本框获取焦点图10-28 自动选择文本功能（1）在页面中创建一个文字文本框和一个密码文本框，在密码文本框右侧添加一个软键盘图标的图片元件，如图10-29所示。（2）在当前页添加一个【页面载入时】事件，用例设置如图10-30 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.4 焦点事件图 10-29 添加的三个元件图 10-30【页面载入时】事件用例设置通过本事件的设置，可以在页面载入时使用户文本框获取焦点。（3）选择软键盘图片元件，将其设置为隐藏，如图10
17、-31 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.4 焦点事件图 10-31 隐藏图片元件（4）选择密码文本框元件，在【属性】子面板中双击【获取焦点时】事件，在打开的对话框中添加【显示】动作，显示对象为软键盘图片元件，如图10-32 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.4 焦点事件图 10-32 设置【获取焦点时】事件用例（5）对密码文本框元件再添加一个【失去焦点时】事件，在打开的对话框中添加【隐藏】动作，隐藏对象为软键盘图片元件，如图1
18、0-33 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.4 焦点事件图 10-33 设置【失去焦点时】事件用例按【F5】键预览，刚载入页面时，用户名文本框就获取了焦点，可以直接通过键盘输入文本，如图10-34 所示。单击密码文本框时，该文本框会获取焦点，同时会在右侧显示软键盘图标，如图10-35 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.4 焦点事件图 10-34 载入页面时获取焦点的用户名文本框图 10-35 获取焦点的密码文本框显示软键盘图标选
19、中事件包括【选中时】、【未选中时】和【选中改变时】三个事件。在下面的案例中，使用鼠标选择某个选项后，其右方会显示对应的图片，未选中某个选项后，其右方的图片会隐藏起来。（1）在页面上创建如图10-36 所示的元件，包括一个文本标签、两个复选框和两个图片元件。（2）将猫猫和狗狗两个图片元件隐藏起来，如图10-37 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.5 选中事件Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.5 选中事件图 10-36 创建的元件图10-
20、37 隐藏两个图片元件（3）选择【猫猫】复选框，双击【属性】子面板中的【选中时】事件，在打开的对话框中添加【显示】动作，在右侧的【配置动作】栏中选择显示的猫猫图片，如图10-38 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.5 选中事件图 10-38 设置猫猫的【选中时】事件的用例（4）再次选择【猫猫】复选框，双击【属性】子面板中的【未选中时】事件，在打开的对话框中添加【隐藏】动作，在右侧选择要隐藏的猫猫图片，如图10-39 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单
21、事件表单事件10.3.5 选中事件图 10-39 设置猫猫的【未选中时】事件的用例（5）选择【狗狗】复选框，双击【属性】子面板中的【选中时】事件，在打开的对话框中添加【显示】动作，在右侧的【配置动作】栏中选择显示的狗狗图片，如图10-40 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.5 选中事件图 10-40 设置狗狗的【选中时】事件的用例（6）再次选择【狗狗】复选框，双击【属性】子面板中的【未选中时】事件，在打开的对话框中添加【隐藏】动作，在右侧选择要隐藏的狗狗图片，如图10-41 所示。Axure RP 8 交互原型
22、设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.5 选中事件图 10-41 设置狗狗的【未选中时】事件的用例按【F5】键预览，当载入页面时显示的状态如图10-42 所示。选择【猫猫】复选框时，下方会显示猫猫的图片，如图10-43 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.5 选中事件图 10-42 载入页面时的效果 图10-43 选中猫猫时的显示效果再选择【狗狗】复选框时，下方也会显示狗狗的图片，如图10-44 所示。取消选择【猫猫】复选框时，猫猫图片就消失了，但是狗狗的图片依然存在，
23、如图10-45 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.3 10.3 表单事件表单事件10.3.5 选中事件图 10-44 同时选择猫猫和狗狗时的显示效果图10-45 取消选择猫猫时的显示效果【获取焦点】动作可以获取某个元件的焦点。该动作对文本框获取焦点非常有用。例如，可以让页面载入时就获取文本框表单的焦点，这样用户进入页面时无需单击文本框就可以直接输入文本了。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.4 10.4 表单动作表单动作10.4.1 获取焦点该动作专门针对列表框和下拉列表框两种元件而设置。使用该动作可以从列表框或者
24、下拉列表框中选中相应的选项。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.4 10.4 表单动作表单动作10.4.2 设置列表选中项在所有的表单元件中，【设置选中】动作只对复选框和单选按钮表单元件有效。下面使用该动作设计一个简单的交互。本案例要实现的效果是：单击按钮会选中全部选项，再次单击该按钮会取消全部选项。（1）在页面中创建一个文本标签，写上表述的文字，再创建4 个复选框元件和一个提交按钮元件，如图10-46 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.4 10.4 表单动作表单动作10.4.3 设置选中图 10-46 创建的元件
25、（2）选择按钮，在右侧的【属性】子面板中双击【鼠标单击时】事件，在打开的对话框中添加一个【切换选中状态】动作，在右侧【配置动作】栏中勾选4 个复选框元件，如图10-47 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.4 10.4 表单动作表单动作10.4.3 设置选中图 10-47【切换选中状态】动作设置按【F5】键预览，在网页浏览器中单击【全选/取消全选】按钮时会选择全部的4 个选项，如图10-48 所示。Axure RP 8 交互原型设计案例教程第第1010章章表单表单10.4 10.4 表单动作表单动作10.4.3 设置选中图 10-48 单击按钮选择全部选项本章总结本章总结通过本章的学习，读者应熟练掌握各个表单元件的使用方法以及各自的用途。要熟练掌握不同类型的文本框有何特点以及在什么情况下使用这些文本框。列表框和下拉列表框非常相似，也要注意区分。单选按钮必须指定选项组方可起到单选的作用。要掌握如何将多个单选按钮指定在相应的选项组中。对于表单而言，还有一些专用的事件，如【文本改变时】、【选项改变时】等，要掌握其用法；还有一些经常在表单上使用的动作，如【获取焦点】、【设置列表选中项】等也要掌握。THANKSA x u r e R P 8 交 互 原 型 设 计 案 例 教 程
