Radio Buttons

The address, city, state, and zip code fields are also constructed with <input type="text" /> elements.

This brings us to the area where we can select the length of our subscription. We can only choose one of the two options. Whenever we have a field that allows a “one-and-only-one” choice, we use radio buttons.

As with all form fields, this one needs a name. Let’s choose something descriptive, but not too long. years seems like a good name.

Since the user doesn’t get to type in the value, we have to supply it within the element. Here’s how we’d draw the first button, and here’s what it would look like:

<form action="showInfo.cgi" method="post">
  Subscribe for:
  <input type="radio" name="years"
     value="1 year ($19.95)" />
  <br />
  <input type="submit" value="Send Data" />
</form>

Surprise! The <input> element draws only the button. If we want to show the users some text next to the buttons, we have to put it outside the element. Here’s the code for both buttons:

<form action="showInfo.cgi" method="post">
  Subscribe for:
  <input type="radio" name="years"
     value="1 year ($19.95)" /> 1 year ($19.95)
  <input type="radio" name="years"
     value="2 years ($35.00)" /> 2 years ($35.00)
  <br />
  <input type="submit" value="Send Data" />
</form>