Freelance Writing Jobs | Today's Articles | Sign In

Intermediate HTML

Lesson 4: Using forms to get visitor feedback

Choices, choices, choices

To offer your visitor a choice among several alternatives you use either checkboxes or radio buttons.

Radio Buttons

I love the name "radio button" because it evokes exactly what it does. When you press a button on your car radio to change to a preselected station, your radio gives you that choice of station, and, basically, takes away the station you had before. It's the same with radio buttons on a form.

Here's a fun example of a form built with radio buttons: Take this quiz to find out if there's a Younger Man in your future. If you are a man, take this one instead.

See what I mean? On that first question, you can't be both under 25 AND over 50, so choosing one HAS TO cut out the others.

Here's a VERY brief form with one set of radio buttons and a submit button:

Here's the code:

<form>
<input type="radio" name="age" value="25-34" />25 to 34
<br />
<input type="radio" name="age" value="35-50" />35 to 50
<br />
<input type="radio" name="age" value=">50" />over 50
<br /><br />
<input type="submit" value="Send us your age" />
</form>

Let's break that down.

We've got a form component that begins "input". Then we specify the type of input component, which is "radio".

Now, here's a tricky part: Notice all the radio buttons in this group have the same name. That's what causes these three radio buttons to behave as radio buttons. If you gave each button a different name, you'd be able to click on them all, and they'd all stay selected.

Next, we specify a value to be passed to the program that will process the form. Very important: don't put any spaces within that value!! HTTP will not pass spaces the way you would expect it to, so it's better to just avoid them. That's why, after the <input> specification, we put the text that will actually show up on the page.

Finally, we have the input component of type "submit". When the user clicks on this submit button, the form gets -- well -- submitted, meaning, the inputted information is sent off to the program that will process it. The only attribute it takes is its value, which really should be called a label, because it's what shows up as text on the button.

Now it's your turn. Start a form of your own and add a radio button group. Any questions, problems or if you just want to show off your work, come to the forum.

Checkboxes

Checkboxes are of the "Check all that apply" variety. In fact, that's frequently how a group of checkboxes is labeled on a form.

Let's take our form with the radio buttons and add some checkboxes:

Here's the code:

<form>
My age is:<br />
<input type="radio" name="age" value="25 to 34" />25 to 34
<br />
<input type="radio" name="age" value="35 to 50" />35 to 50
<br />
<input type="radio" name="age" value="over 50" />over 50
<br /><br />
I am (check all that apply)<br />
<input type="checkbox" name="qualities" value="clever" />clever
<br />
<input type="checkbox" name="qualities" value="fat&bald" />sexy
<br />
<input type="checkbox" name="qualities" value="wealthy" />fabulously wealthy
<br />
<input type="checkbox" name="qualities" value="liar" />charming
<br />
<input type="checkbox" name="qualities" value="boring" />suave
<br />
<input type="checkbox" name="qualities" value="nerdy" />kinda nerdy
<br /><br />
<input type="submit" value="Send" />
</form>

So we have a second type of input component, the checkbox, called that because -- um -- it looks like a box and you check it.

Everything else we said about specifying a radio button goes for checkboxes too. We give a group the same name because the information will be passed as one group that way, instead of having five lines all labeled "qualities".

Your turn. Modify your form with a group of checkboxes and report back here when it works. If it doesn't work, debug it. If you can't debug it, go to the forum and tell us your tale of woe.