The Radio Button Element

The radio button element represents an html input of type 'radio' and is used to allow a form user to select one choice from a mutually exclusive list of choices:



Create a radio button by clicking 'Radio Button' under the Form Elements heading in the 'Add New Element' menu:

Then edit the attributes for the radio button

and click the 'Create' button.

ID

ID is the document object model identifier for the radio button. The important thing to remember about any id you assign is to make it unique among all the elements in the form. The editor will remind you if you try to assign a duplicate id to any element.

Name

The Name attribute identifies a radio button as a member of a particular group of radio buttons and should be unique for each group of radio buttons (or other elements) in your form.

When radio buttons share a name, they are mutually exclusive - when one is selected, all the others that share it's name are automatically deselected.

Name is also the identifier passed to your form processing script as a name=value pair. In this pair, value is the Value attribute of the radio button in the group that was selected when the form was submitted.

Unlike the Check Box element, no matter the number of radio buttons that share a common name, a single name=value pair identifying a single selected radio button is sent on form submission.

Label

Label represents an html label element that serves as a caption for the radio button, telling the form user what choice he or she is making by selecting the radio button. Enter the text of the label here.

One of the useful features of the label is that a form user can select the radio button by clicking on the radio button itself, or on the text of the label also.

The label doesn't have a fixed position in relation to the radio button (like the relationship between a fieldset and a legend) and can be moved above, below, or to either side of the radio button in the presentation pane of formArchitect.

Value

This is the value that will be assigned in the name=value pair if this radio button is currently selected when the form is submitted.

For example, say you have a simple radio button group

where both radio button share the name 'drink' and the Value attribute of the first radio button is 'c' and the Value attribute of the second radio button is 't'. If the form were submitted with the radio buttons selected as shown above, the name=value pair of drink=c would be passed to your form processing script. If the bottom radio button were instead selected, drink=t would be sent.

Selected?

Choose 'Yes' and this radio button will initially be selected when the form is loaded on your web page. You should set this attribute to 'Yes' for one radio button in each group.

Access Key

Access Key allows you to specify a character that will allow a user to select the radio button without using the mouse or another pointing device. The actual key combinations (shift-[key], alt-[key], etc.) vary by browser.

Although designed to make forms more accessible to those unable to use a mouse, this attribute can cause conflicts with other assistive technology (like screen readers) and is poorly implemented at best. I've included it here for completeness, but be sure to research the implications of specifying an Access Key before doing so.

Tab Order

By using the 'tab' key on their keyboard, a user can cycle through and access all the elements in your form without using the mouse to select them. Tab Order allows you to specify the position of the radio button in your form's tabbing order.

If this attribute is left blank (or set to 0), this radio button will be placed in the tabbing order as it appears in the form.

If Tab Order is set to a negative number, this radio button will be removed from the tabbing order.

If set to a positive number, elements in the form will be selected in increasing Tab Order with this radio button being selected in the position you enter here.

Title

The title attribute offers advisory information about the radio button and is displayed in various ways depending on the browser in use. Visual browsers may display Title as a 'tool tip' (appears when the mouse pauses over the radio button) whereas audio browsers may speak the Title.

Disabled

When Disabled is set to 'yes', a user will be unable to select the radio button. Additionally, a disabled radio button cannot receive focus, will be skipped in tabbed navigation, and it's value will not be sent to your form processing script (even if selected).

Read Only

When Read Only is set to 'yes', a user will be unable to select the radio button. However, unlike a disabled radio button, a radio button set to read only can receive focus, will appear in tabbed navigation, and, if selected, it's value will be sent to your form processing script.

Editing / Deleting a Radio Button

The "Edit Radio Button" form is the same as the "Add New Radio Button" form with two exceptions.

First, the current values for each attribute are filled in. Edit these attributes as you wish then click the 'Save' button at the bottom of the form to save your changes.

Additionally, a link to delete the radio button can be found below the 'Save' button:

Click this link to permanently delete the radio button.