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 need to be grouped together. This tells the browser that only “one of the choices” of this group can be selected. 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 will be sent along with the returned 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>Admit Type:</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: A radio button set cannot be “deselected.”