单选按钮与复选框使用实例

在表单中使用单选框和复选框可以设置预定义的选项。访问者可以通过点击单选框或复选框来选择预置的选项。

单选框和复选框的区别在于它们的运作方式不同。每个复选框都是独立的，点击选中只是在切换单个选项的选中与否，因此可以选中多个选项。而单选框所有的待选项是一个整体，对于选项的选择具有独占性，也就是说，在单选框的待选项中，只允许有一个选项处于被选中状态。

下面通过一个简单例子演示单选按钮和复选框的使用方法。

继续上例，将光标放置于“性别”单元格后一个单元格，单击“插入”栏“表单”面板中的按钮，添加一个单选框，在此单选框后键入文本“男”。

在属性面板中为新添加的单选框对象命名“gender”，设置选定值为0，初始状态为“未选中”。

●“单选按钮”：用于设置单选按钮的名称。该名称可以被脚本或程序所引用。

●“选定值”：用于设置该单选按钮被选中时的值，这个值将会随表单一起提交。

●“初始状态”：用于设置单选按钮的初始状态。同一组单选按钮中只能有一个按钮的初始状态是选中的。

●“类”：用于设置应用于单选框域的CSS样式。

同理，再添加同名为“gender”的单选框，改变选定值为1，并在单选框后键入文本“女”。此时结果如图9-14所示。

图9-14 插入的单选按钮

注意：由于单选按钮是以组为单位的，因此所有的单选按钮都必须拥有同一个名称，并且其值均不能相同。如果页面中某个选项需要添加的单选按钮很多，通过一个一个地添加单选按钮，然后再一个一个地改名，实现起来特别烦琐。使用“单选按钮组”则可以一次建立一组单选按钮。

单击“表单”面板中的“单选按钮组”图标按钮，打开如图9-15所示的“单选按钮组”对话框。

图9-15 “单选按钮组”对话框（1）

图9-16 “单选按钮组”对话框（2）

在“名称”文本框中定义单选按钮组的名称。本例使用默认设置。

在“单选按钮”列表框中定义单选按钮组的单选按钮的个数，以及代表的值。单击“标签”列下的“单选”，该文本框即变为可编辑状态，输入要在页面上显示的单选按钮的标签；单击“值”下面的“单选”，然后设置该单选按钮被选中时的值。(www.xing528.com)

单击列表框左上角的和按钮可以添加和减少单选按钮的数目。

单击列表框右上角的和按钮可以调整当前选中的单选按钮在单选按钮组中的位置。

在“布局，使用”区域设置单选按钮组中的各个单选按钮的分隔方式。本例选择“表格”。此时的对话框如图9-16所示。

插入的单选按钮组的各个单选按钮是上下排列的，用户可以通过<br>标记分开，也可以选择通过表格的单元格来界定。

单击“确定”按钮关闭对话框，并在页面中插入单选按钮组，如图9-17所示。

图9-17 插入的单选按钮组

选中单选按钮组，在属性面板中可以设置各个单选按钮初始时是否选中。

执行“插入”/“表单”/“复选框”菜单命令，或单击“表单”插入面板中的复选框图标按钮，即可向表单中添加一个复选按钮，然后在其后输入“Photoshop”。

重复步骤（12），再插入三个复选框，如图9-18所示。

选中任一个复选按钮，在属性面板中设置其名称和初始状态。

图9-18 插入的复选框效果

●“复选框名称”：用于设置复选框的名称。该名称可以被脚本或程序所引用。 注意：与单选按钮不同，由于每一个复选框都是独立的，因此应为每个复选框设置唯一的名称。

●“选定值”：用于设置该复选框被选中时的值，这个值将会随表单提交。

文档创建完毕，保存文档。按下快捷键F12即可在浏览器中预览整个页面的效果，如图9-19所示。

图9-19 预览页面效果