Radio Buttons

Radio Buttons (type="radio") allow users to select one item.

Notice in the code example below, that this element, like the text box, will likely be placed in a <p>...</p>. This makes it easy to add information or “choice” text around the elements.

name (Required)

Radio buttons must be grouped together. This tells the browser that only “one of the choices” of this group can be selected. This is a user interface standard to which we should adhere.

To group radio button elements together the developer provides the same name="" attribute value for each possible choice. As with all elements, this name attribute is sent along with the rest of the form data.

value (Required)

Unlike text boxes, where the user enters unique data, radio buttons provide discrete options/data. To set the data that might be returned from this element, use the value="" attribute.

checked (Optional)

The checked="checked" attribute can be used with one of the radio button elements to ‘pre-select’ an option that will be displayed when the page loads.

<p>Admission Level:</p>
  <input type="radio" name="level" value="nondeg" /> Nondegree
  <br />
  <input type="radio" name="level" value="undergrad" checked /> Undergraduate
  <br />
  <input type="radio" name="level" value="grad" /> Graduate
  <br />
  <input type="radio" name="level" value="other" /> Other

NOTE: Once a radio button is selected, it cannot be “deselected.”