3.2 表单元件
Axure RP 9中的表单元件与HTML页面非常类似，例如文本框元件对应input元素，多行文本框元件对应textarea元素等。
1.文本框元件
与HTML页面的input元素相对应，文本框元件有多种文本类型，包括：Text（普通文本）、密码、邮箱、Number（数字）、Phone Number（电话号码）、Url（URL地址）、查找、文件、日期、Month（月份）和Time（时间）。
有些文本类型在网页浏览器中并没有明显的不同之处，如Email、Number、Phone Number、Url等，通过手机终端浏览时会有所不同。
选择文本框元件后，输入文字内容，可编辑文本输入框的默认内容，并能通过右侧“样式”面板设置文本的颜色、字体和字号等信息。并可如HTML的input元件一样，设置是否为“只读”或“禁用”。
在“元件库”面板拖动多个文本框元件到“页面设计”面板，并在“样式”面板选项卡中设置不同的文本类型，如图3-12所示。
文本框元件的“样式”面板与矩形元件大同小异，如果需要设置文本的提示信息，例如图3-12中“请输入邮箱”的提示信息，当用户没有输入内容时，该文本框显示“请输入邮箱”，当用户开始输入内容（默认设置），或者文本框获得焦点后，“请输入邮箱”的提示信息将被清除。
在Axure RP 9 中，可通过“交互”面板中的“:提示”属性设置提示文本，并可通过提示文本样式设置对话框设置提示文本，例如设置字体颜色和字体尺寸等信息，设置信息如图3-13所示。
图3-12 不同文本类型的文本框元件
图3-13 设置文本框元件提示文本样式
2.多行文本框元件
多行文本框元件与HTML的textarea元素对应，与文本框元件不同之处在于它可以输入多行文本，其余设置与文本框元件类似。从“元件库”面板拖动一个多行文本框元件到“页面设计”面板，并设置其默认文本内容后，如图3-14所示。
图3-14 多行文本框元件
同样可以设置多行文本框元件的提示文本、提示文本样式、隐藏提示触发时机（输入文本或获取焦点时）和最大长度等信息，方法与文本框元件类似，不再赘述。
3.下拉列表框元件
下拉列表框元件只允许用户从下拉列表中选择，不允许用户输入，与HTML的select元素类似。从“元件库”面板拖动一个下拉列表框元件到“页面设计”面板，并双击该元件，打开“编辑下拉列表”对话框，可设置下拉列表选项，如图3-15所示。
在“编辑列表选项”对话框中，单击“
”按钮可单个添加下拉列表选项，单击“编辑多项”按钮，打开“编辑多项”对话框，如图3-16 所示。在图3-16 中单击“确定”按钮，此时，“编辑下拉列表”对话框如图3-17所示。
图3-15 编辑列表选项对话框
图3-16 为下拉列表添加多个选项
图3-17 编辑列表选项对话框（设置了下拉选项）
在图3-17 中，选择某个选项（如“湖南省”）后，可单击工具栏的“
”（上移）、“
”（下移）、“
”（删除单个选项），并可勾选某个选项将其设置为默认选项。单击“编辑下拉列表”对话框的“确定”按钮，选项设置完毕，此时，“页面设计”面板区域的下拉列表框元件如图3-18所示。
图3-18 下拉列表框元件
可在“交互”面板设置下拉列表框元件的事件（选项改变时、获取焦点时或失去焦点时等）等信息，如图3-19所示。
4.列表框元件
列表框元件用于提供用户多选的选项，一般用在想让用户看到所有的选项，或者多个选项允许同时选择时，例如用户选择旅游过的省份等。从“元件库”面板拖动一个列表框元件到“页面设计”面板，并双击该元件，打开“编辑列表框”对话框可设置下拉列表选项，该对话框与下拉列表框元件的“编辑下拉列表”对话框类似。
在“页面设计”面板区域设置列表框元件，如图3-20所示。
5.复选框元件
复选框元件也可以用于用户选择多个内容，达到列表框元件类似的效果。从“元件库”面板拖动多个元件到“页面设计”面板区域后，双击可编辑内容。如图3-21所示，拖动了7个复选框元件到“页面设计”面板，并将文本内容分别设置为：湖北省、湖南省、广东省、四川省、北京市、重庆市和天津市。
图3-19 设置下拉列表框元件事件
图3-20 列表框元件
图3-21 复选框元件
复选框元件的基本操作如下。
1）选中复选框：若想设置某个选项默认为选中状态，可选择某个选项后，右击选择“选中”，将复选框设置为选中状态。
2）取消选中复选框：若想设置某个选项默认为取消选中状态，可选择某个选项后，右击选择“选中”取消，将复选框设置为未选中状态。
3）启用复选框：默认时，复选框元件是启用状态。如果该复选框为禁用状态，可选择该选项，右击选择“禁用”取消，将复选框设置为启用状态。
4）禁用复选框：默认时，复选框元件是启用状态，若想设置为禁用，可选择某个选项后，右击选择“禁用”，将复选框设置为禁用状态。
5）调整复选框靠左或靠右对齐：设置复选框在文字左侧还是右侧，默认时在左侧。可选择某个选项后右击，选择“复选框居右”。将复选框设置到文字的右侧，右击选择“复选框居左”，可将复选框设置到文字的左侧。
6.单选按钮元件
单选按钮元件只允许用户从多个选项中选择一个，对应HTML页面中的radio元素。如选择性别，以及在购买商品后选择收货地址等。
例如，从“元件库”面板区域拖动3 个单选按钮元件到“页面设计”面板，并双击设置其文字分别为：保密、男和女，如图3-22所示。
在默认情况下，所有单选按钮元件都无分组，因此不同的单选按钮元件都是可以选中的，如图3-23 所示。因为Axure RP 9 并不知道哪些单选按钮元件是一组的，因此，需要手动将一个组的单选框组件设置为同一个单选按钮组。
图3-22 单选按钮元件案例
图3-23 未设置分组的单选按钮元件
同时选中多个单选按钮元件，例如选中图3-22 所示的3 个单选按钮元件，右击选择“指定单选按钮的组”，设置“组名称”为“genderGroup”，如图3-24所示。
图3-24 设置单选按钮组
双击勾选“保密”单选按钮元件为选中状态，此时，使用〈F5〉键查看预览效果，可看到默认选项为“保密”，并且，当更改选项为“男”时，可看到原选项“保密”自动被设置为取消选择状态。