How to Create a Radio Button in an HTML5 Form - dummies

How to Create a Radio Button in an HTML5 Form

By Andy Harris

To include radio buttons on your HTML5 web page, it helps to know what they are and how to use them. On the surface, radio buttons seem a lot like checkboxes, but they are different in a number of important ways:

  • Radio buttons occur only in groups. You can have one checkbox on a form, but radio buttons make sense only when placed in groups.

  • Only one element can be selected. Selecting one radio button deselects the others. It’s like a car radio, where clicking one of the preset buttons deselects the others. (It’s really like the old car radios where if the button for the selected station was physically pushed in, the other buttons would pop out. Although that type of radio is long gone, the name lives on.)

  • The id of each radio button is unique. Each id on a Web page must be unique, and the id elements of each radio button follow those rules.

  • Each radio element also has a name attribute. The name attribute is used to specify the entire group of radio objects.

  • All radio buttons in a group have the same name. HTML uses the name attribute to figure out which group a radio button is in, and to ensure that only one button in a group is selected.

This figure shows a form containing a group of radio buttons for choosing Small, Medium, or Large:


Consult the following code to see the setup for a web page with buttons:

<html lang = "en">
    <meta charset = "UTF-8" />
    <h1>Form Demo</h1>
       <legend>Selecting elements</legend>
          <label>Radio buttons</label>            
          <input type = "radio"
                 name = "radSize"
                 id = "sizeSmall"
                 value = "small"
                 checked = "checked" />
          <label for = "sizeSmall">small</label>
          <input type = "radio"
                 name = "radSize"
                 id = "sizeMed"
                 value = "medium" />
          <label for = "sizeMed">medium</label>
          <input type = "radio"
                 name = "radSize"
                 id = "sizeLarge"
                 value = "large" />
          <label for = "sizeLarge">large</label>

To build a group of radio buttons, follow these steps:

  1. Begin by creating an input element to serve as the basic foundation.

  2. Set the type to radio.

  3. Give each radio button a unique id.

  4. Use the name attribute to identify all the buttons in a group.

  5. Consider visual grouping as well.

    The user won’t be able to tell which buttons are part of a group by the HTML formatting alone. You can use fieldsets or other formatting tricks to help the user know which buttons are in which group. All buttons in one group should be physically near each other.

  6. Make one of the buttons checked (selected) by default.

    Apply the checked = checked attribute (provided by the department of redundancy department) to one of the elements so it will start out checked.

    If you don’t preselect one radio button, any programs attached to your form will get confused.