3.2 表单元件
Axure RP 8中的表单元件与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 8 中，可通过“检视”面板的“属性”选项卡中的“提示文本”属性设置提示文本，并可单击“提示样式”按钮，打开提示文本样式设置对话框进行设置，例如设置字体颜色和字体尺寸等信息。另外，还可设置文本框的最大输入长度，设置信息如图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-17 中，选择某个选项（如“湖南省”）后，可单击工具栏的“
”（上移）、“
”（下移）、“
”（删除单个选项）和“
”（删除所有选项）操作，并可勾选某个选项将其设置为默认选项。单击“编辑列表选项”对话框的“确定”按钮，选项设置完毕，此时，“页面设计”面板区域的下拉列表框元件如图3-18所示。
图3-15 编辑列表选项对话框
图3-16 为下拉列表添加多个选项
图3-17 编辑列表选项对话框（设置了下拉选项）
可在“检视”面板的“属性”选项卡设置下拉列表框元件的事件（选项改变时、获取焦点时或失去焦点时等）、列表项、提交按钮和元件提醒等信息，如图3-19所示。
图3-18 下拉列表框元件
4.列表框元件
列表框元件用于提供用户多选的选项，一般用在想让用户看到所有的选项，或者多个选项允许同时选择时，例如用户选择旅游过的省份等。从“元件库”面板拖动一个列表框元件到“页面设计”面板，并双击该元件，打开“编辑列表选项”对话框可设置下拉列表选项，该对话框与下拉列表框元件的“编辑列表选项”对话框类似。
在“页面设计”面板区域设置列表框元件，如图3-20所示。
图3-19 设置下拉列表框元件属性
图3-20 列表框元件
5.复选框元件
复选框元件也可以用于用户选择多个内容，达到列表框元件类似的效果。从“元件库”面板拖动多个元件到“页面设计”面板区域后，双击可编辑内容。如图3-21所示，拖动了7个复选框元件到“页面设计”面板，并将文本内容分别设置为：湖北省、湖南省、广东省、四川省、北京市、重庆市和天津市。
图3-21 复选框元件
复选框元件的基本操作如下。
1）选中复选框：若想设置某个选项默认为选中状态，可选择某个选项后，在“检视”面板的“属性”选项卡，勾选“选中”属性，将复选框设置为选中状态。
2）取消选中复选框：若想设置某个选项默认为取消选中状态，可选择某个选项后，在“检视”面板的“属性”选项卡，取消勾选“选中”属性，将复选框设置为未选中状态。
3）启用复选框：默认时，复选框元件是启用状态，若想设置为禁用，可选择某个选项后，在“检视”面板的“属性”选项卡，取消勾选“禁用”属性，将复选框设置为启用状态。
4）禁用复选框：默认时，复选框元件是启用状态，若想设置为禁用，可选择某个选项后，在“检视”面板的“属性”选项卡，勾选“禁用”属性，将复选框设置为禁用状态。
5）调整复选框靠左或靠右对齐：设置复选框在文字左侧还是右侧，默认时在左侧。可选择某个选项后，在“检视”面板的“属性”选项卡，在“对齐按钮”属性，可选择“右”将复选框设置到文字的右侧，在“对齐按钮”属性选择“左”，可将复选框设置到文字的左侧。
6.单选按钮元件
单选按钮元件只允许用户从多个选项中选择一个，对应HTML页面中的radio元素。如选择性别，以及在购买商品后选择收货地址等。
例如，从“元件库”面板区域拖动3 个单选按钮元件到“页面设计”面板，并双击设置其文字分别为：保密、男和女，如图3-22所示。
在默认情况下，所有单选按钮元件都无分组，因此不同的单选按钮元件都是可以选中的，如图 3-23 所示。因为 Axure RP 8 并不知道哪些单选按钮元件是一组的，因此，需要手动将一个组的单选框组件设置为同一个单选按钮组。
图3-22 单选按钮元件案例
图3-23 未设置分组的单选按钮元件
同时选中多个单选按钮元件，例如选中图3-22所示的3个单选按钮元件，之后在“检视”面板的“属性”选项卡，设置“设置单选按钮组名称”为“genderGroup”，如图3-24所示。
并且双击勾选“保密”单选按钮元件为选中状态，此时，使用〈F5〉键查看预览效果，可看到默认选项为“保密”，并且，当更改选项为“男”时，可看到原选项“保密”自动被设置为取消选择状态。
7.提交按钮元件
提交按钮元件用于接受用户单击时提交表单，从“元件库”面板区域拖动一个提交按钮元件到“页面设计”面板，如图3-25所示。
图3-24 设置单选按钮组
图3-25 提交按钮元件
可在“检视”面板的“属性”选项卡设置提交按钮元件的事件，只支持“鼠标单击时”“移动时”“尺寸改变时”“显示时”“隐藏时”和“载入时”事件。
需要注意的是，其他的表单元件，包括：文本框元件、多行文本框元件、下拉列表框元件、列表框元件、复选框元件和单选按钮元件，都可以在“检视”面板的“属性”选项卡设置这些元件的“提交按钮”属性。