If you're building a form on your website and want your visitors to choose from one or more preselected options, then a multiple-choice input field is the way to go.

The radio button is a very common choice for multiple-choice options; you'll often see them used on web quizzes and similar forms. These buttons are used when you want your visitor to select only one of several options. For example, if you were building a personality quiz on your website and wanted visitors to select their favorite primary color (red, blue or yellow) you would use radio buttons.

Radio buttons are grouped by their "name" attribute. In a group of radio buttons sharing the same name, visitors will only be able to select one; clicking on a different button in the group will deselect the original choice. The "value" attribute defines which option the radio button belongs to, and the "checked" attribute allows you to preselect an option.

In the example above, the question might be coded as follows:

What is your favorite primary color?<br>
<input type="radio" name="fav_color" value="Red">Red<br>
<input type="radio" name="fav_color" value="Blue" checked>Blue<br>
<input type="radio" name="fav_color" value="Yellow">Yellow

On your site, the question would look like this:

What is your favorite primary color?
Red
Blue
Yellow

The second multiple-choice field is the drop-down menu. With a drop-down, you can choose to allow multiple selections or only one; drop-down menus also take up less room on the page, so they allow you to present more options with less crowding.

Drop-down menus use the "select" tag as the field's foundation, and the "option" tag to set the menu items. You can modify the "select" tag with the "size" attribute, which specifies how many items are visible before the visitor clicks to open the menu, and the "multiple" attribute, which if set allows the visitor to select more than one option. You can also modify the "option" tag; the "selected" attribute allows you to preselect that option.

Here's a sample question using a drop-down menu:

What is your least favorite day of the week?<br>
<select name="bad_day">
<option value="Sunday">Sunday</option>
<option value="Monday" selected>Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>

On your site, the question would look like:

What is your least favorite day of the week?

Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday


The third multiple-choice option is the checkbox. Checkboxes are similar to radio buttons, except that they always allow visitors to select multiple options. Checkboxes allow the same attributes as radio buttons.

A sample question using checkboxes:

What pet(s) do you have?<br>
<input type="checkbox" name="pets" value="Dog"> Dog<br>
<input type="checkbox" name="pets" value="Cat"> Cat<br>
<input type="checkbox" name="pets" value="Bird"> Bird<br>
<input type="checkbox" name="pets" value="Mouse"> Mouse<br>
<input type="checkbox" name="pets" value="Hamster"> Hamster<br>
<input type="checkbox" name="pets" value="Alligator"> Alligator<br>
<input type="checkbox" name="pets" value="Other"> Other<br>

Your visitors would see:

What pet(s) do you have?
Dog
Cat
Bird
Mouse
Hamster
Alligator
Other