Adobe Dreamweaver CC 2014 v.13 - Manual (Page 315)

To the top
6. (Optional) Click a radio button or its value to select a specific row, and then click the up and down arrows to move the row up or down.
7. Select a layout type for the radio group.
Line breaks Places each radio button on a separate line using line breaks (br tags).
Table Places each radio button on a separate line using individual table rows (tr tags).
8. Click OK.
Note: You can also insert a Radio Group widget by using the Spry category in the Insert panel.
Specify when validation occurs
You can set the point at which validation occurs—when the user clicks outside the widget, as the user makes selections, or when the user tries to
submit the form.
1. Select a Validation Radio Group widget in the Document window by clicking its blue tab.
2. In the Property inspector (Window > Properties), select the option that indicates when you want validation to occur. You can select all of the
options or Submit only.
Blur Validates whenever the user clicks outside the radio group.
Change Validates as the user makes selections.
Submit Validates when the user tries to submit the form. The submit option is selected by default, and cannot be deselected.
Display widget states in Design view
1. Select a Validation Radio Group widget in the Document window by clicking its blue tab.
2. In the Property inspector (Window > Properties), select the state you want to see from the Preview States pop-up menu. For example, select
Initial to see the widget in its initial state.
Change required status of radio buttons
By default, Validation Radio Group widgets require the user to make a selection before submitting the form. You can, however, make selections
optional for the user.
1. Select a Validation Radio Group widget in the Document window by clicking its blue tab.
2. In the Property inspector (Window > Properties), deselect the Required option.
Specify an empty or invalid value
You can specify a value that registers as empty or invalid if the user selects a radio button that is associated with one of those values. If the user
selects a radio button with an empty value, the browser returns the error message “Please make a selection.” If the user selects a radio button with
an invalid value, the browser returns the error message “Please select a valid value.”
Radio Group widget with empty value radio button.
1. Select the radio button in your Radio Group widget that you want to use for the empty or invalid radio button. When specifying empty or
invalid values for the widget, there must be corresponding radio buttons with those values already assigned.
2. In the Radio Button Property inspector (Window > Properties), assign the radio button a checked value. To create a radio button with an
empty value, type none in the Checked Value text box. To create a radio button with an invalid value, type invalid in the Checked Value text
box.
3. Select the entire Validation Radio Group widget by clicking the widget’s blue tab.
4. In the Property inspector, specify empty or invalid values. To create a widget that displays the empty value error message “Please make a
selection,” type none in the Empty Value text box. To create a widget that displays the invalid value error message “Please select a valid
value,” type invalid in the Invalid Value text box.
Remember, both the radio button itself and the Radio Group widget must have the none or invalid values assigned for the error messages to
display properly.
Customize the Radio Group widget
Although the Property inspector enables you to make simple edits to a Validation Radio Group widget, it does not support customized styling tasks.
You can alter the CSS for the Validation Radio Group widget so that you can create a widget that is styled to your liking. For a more advanced list
of styling tasks, see
www.adobe.com/go/learn_dw_spryradio_custom_en .
All CSS rules in the topics below refer to the default rules located in the SpryValidationRadio.css file. Dreamweaver saves the
SpryValidationRadio.css file in the SpryAssets folder of your site whenever you create a Spry Validation Radio Group widget. Consulting this file is
helpful because it contains commented information about various styles that apply to the widget.
Although you can easily edit rules for the Validation Radio Group widget directly in the accompanying CSS file, you can also use the CSS
Styles panel to edit the widget’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget,
308