Radio Buttons

Radio buttons are little circles, generally in a list, that can be checked by clicking them. Only one radio button in a group can be checked at a time. Checking one will clear the others. These come in handy when there are a limited number of choices to make and only one choice can be selected.

These buttons are made by using the "radio" TYPE of <input> like this:

<form name="form1">

<input type="radio" name="radiosample">Sample #1<br>

</form>

This is how a single radio button is made. To make more we just code in extra <input>s. The important thing to do to get the radio buttons to work together is to give all of them the same NAME. This forms them into a group that will work together.

<form name="form1">

<input type="radio" name="radiosample">Sample #1<br>

<input type="radio" name="radiosample">Sample #2<br>

<input type="radio" name="radiosample">Sample #3<br>

</form>

By having the same NAME, the above group of radio buttons will work together so that only one in the group can be checked at a time.

Notice the "text tags" I've associated with each box. They read "Sample #1", etc. Without this text, no one would know what the radio button represented. We can put the text on either side of the radio button by either coding it before or after the radio button's <input> tag. I've coded the text tag after the button's tag in the example.

Also notice that I used a <br> tag to organize the radio buttons and their associated text tags in a vertical column. I could have used &nbsp;, or nothing at all, to lay them out on a single line:

The easiest way to format form fields is with <br> tags and &nbsp;. You can also use a table or CSS to add more extensive formatting you your form's fields.

Checkboxes

Checkboxes are coded much like radio buttons, but behave differently. You can check any number of boxes in a group of checkboxes:

The above was coded like this:

<form name="this_checkbox_form">

<input type="checkbox" name="check">Sample #1<br>

<input type="checkbox" name="check">Sample #1<br>

<input type="checkbox" name="check">Sample #1<br>

</form>

The big thing to remember is to use TYPE="checkbox". You'll also want a group of checkboxes to have the same NAME so they'll work together as a group. The function of this grouping isn't as obvious as with radio buttons, but it helps to find the values of the checked boxes when coding the form's backend.

Also note that the formatting, text tags, and overall layout is the same as with radio buttons. All <input>s are inline elements that are rendered much like images of the same size.

The CHECKED Attribute

You may want to have a group of radio buttons or checkboxes displayed with a particular option already checked by default. To do this just put a CHECKED attribute in the appropriate <input> tag.

<input type="radio" checked>

The above radio button would appear already checked. The viewer will be able to uncheck the box by selecting another. Checkboxes work similarly. A box can be pre-selected with CHECKED and then be deselected by the viewer.

Summary & Exercises

You can make radio buttons and checkboxes with TYPE="radio" and TYPE="checkbox" respectively. Radio buttons will only let you select one item from a group. Checkboxes will allow you to select any number of items from a group.

The key to getting radio buttons and checkboxes to work together as a group is to give all of the <input> tags the same NAME.

You should generally put some text beside the radio buttons and checkboxes to tell the viewer what they represent. You can format your radio buttons and checkboxes with <br> tags, &nbsp;, or more advanced tabular and CSS layout.

Now lets add some radio buttons and checkboxes to the form we started in the last lesson. Add these radio buttons and checkboxes to the previous form.

To Next Advanced HTML Lesson

Back To Advanced HTML Index