Creating Forms: The Select Tag: Pulldown Menus
Creating Forms
The <select> Tag: Pulldown Menus
The select tag is another oddball in the world of forms. When you have too many possible answers to a question to use checkboxes or radio buttons – for example, “What state are you from?” or “Which countries would you like to visit?” – select tags are an ideal replacement. Depending on the attributes you give them, they can act like a pulldown menu or a box that lets your users select from a long list of multiple items.
Every select tag has two basic parts: the <select> and </select> tags that define where the tag begins and ends, and the <option> and </option> tags that mark the various options available to users:
<select name="newsletter_frequency"> <option>Every Day</option> <option>Twice a Week</option> <option>Every Week</option> <option>Every Month</option> </select>
By default, this will create a pulldown menu that looks like this:
The name attribute for the <select> tag helps to identify this group of information when it’s processed by a script or program. The option tags define the values that will be associated with that name. For example, when the user selects the option marked “Every Week”, your form gives the select menu with the name “newsletter_frequency” a value of “Every Week.”
If your options are long and complicated, you can assign them a shorter and simpler value by giving the <option> tag a value attribute. Keeping your values short and sweet will make them easier for a script to process:
<select name="newsletter_frequency"> <option value="daily">Every Day</option> <option value="semiweekly">Twice a Week</option> <option value="weekly">Every Week</option> <option value="monthly">Every Month</option> </select>
Now, when the user selects the “Every Week” option, the value your form passes on will be set to “weekly.”
If you want to have one option in the menu initially selected, use the selected attribute:
<option value="weekly" selected="selected">Every Week</option>
Which creates:
Try it Yourself
Make your own tweaks or additions to the code in the left box below, then click “Show Changes” to see the results in the right box.
|
Web Page
|