HTML - Radio Forms

Radio form elements resemble the "Scan-Tron" sheets you may have used when you were in school to take a test. They basically allow the user to "bubble" in their choice and limit each question to only one selection per radio group.

HTML Radio Fields:

Please select your favorite food category.

: Italian
: Greek
: Chinese

By naming each field similarly with a type of cuisine, we have created a relation, or a "grouping," of radio elements. This is how we link each element together and assure that the user is able to select only one answer.

Let's now take a look at how we can group together different sets of radio elements and simulate capturing two pieces of user data: gender and favorite food.

Default Italian:

: Italian
: Greek
: Chinese

Using either/or logic, radios provide a very efficient way to capture very specific data from visitors. Remember to use radio elements only when you'd like the viewer to select only a single value, just as you might expect to see when taking a multiple-choice test in school.