Building Better Forms with HTML Radio Buttons

Building Better Forms with HTML Radio Buttons
Page content

HTML5 Forms and Radio Buttons

The nice thing about forms in HTML5 is that they degrade gracefully; you can add new elements using the latest standards, and everything will look just fine in older browsers. Radio buttons aren’t one of those new elements - there’s nothing new about html radio buttons - but the new options do mean that HTML forms will be becoming more popular, and radio buttons are an important element in those forms. Additionally, some new attributes make it even easier to make radio buttons do exactly what you want them to do.

HTML radio buttons are used for mutually exclusive selections; that is, when you have a list of item and you want the user to select exactly one (or at most one) option; if you wanted to allow multiple items to be selected, you would use a checkbox instead.

Basic HTML Coding for Radio Buttons

Suppose we have a simple form that asks the user to select between three meal choices:

Pizza

Burgers

Chicken

There’s a lot going on here, so let’s break it down a bit. The form tags are pretty self-explanatory, while the submit button passes the value chosen when the user presses it. But let’s take a look at the radio buttons themselves:

Pizza

First off, this is an input of type radio. It has the name lunch, which tells the browser that all of the radio buttons with this name (in this case, pizza, burgers, and chicken) are to be grouped together; this means that it will only allow you to select one of the options in the group. (If the name had been omitted, you could select all three buttons). Value is what will be passed when the user submits the form. If that’s all we put, the user will only see the button; we put some text after it to describe what that button represents.

More Attributes

While we used the most important attributes above, there are quite a few more that you can use. A comprehensive list of the attributes and constraints is available from the W3C draft on radio buttons. Here are a few that you might find useful:

The disabled attribute keeps a button from being selectable; it will be greyed out on the display. This allows you to show that an option is present on the form, but cannot currently be selected. No value is required; you can simply list the attribute, as follows:

Burgers

Another one is the checked option, which (surprise, surprise) lets you preselect a default value to be checked. This again does not require a value; note that if you try to use it on several radio buttons in the same group, only the last one will actually end up checked. Checked can be combined with disabled; the disabled button will be checked when the page loads, but of course the user will be unable to reselect it if he selects a different options.

In either case, if you don’t like leaving an attribute empty, you can set it to a value of "" or its name (“disabled” or “checked”, respectively); any of the three methods will have the same result.

Summary & References

The HTML radio button is an important element in modern form design, and knowing about the latest enhancements made in HTML5 allows you to make your forms even more user-friendly.

The author of this article has worked as a website developer; coding was checked against the official W3C site (https://www.w3.org), which keeps the standards implemented by modern web browsers.