logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

Multiple-Choice Input Fields for HTML Forms

Guest Author - Elizabeth Connick

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?


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
This site needs an editor - click to learn more!

Add Multiple%2DChoice+Input+Fields+for+HTML+Forms to Twitter Add Multiple%2DChoice+Input+Fields+for+HTML+Forms to Facebook Add Multiple%2DChoice+Input+Fields+for+HTML+Forms to MySpace Add Multiple%2DChoice+Input+Fields+for+HTML+Forms to Del.icio.us Digg Multiple%2DChoice+Input+Fields+for+HTML+Forms Add Multiple%2DChoice+Input+Fields+for+HTML+Forms to Yahoo My Web Add Multiple%2DChoice+Input+Fields+for+HTML+Forms to Google Bookmarks Add Multiple%2DChoice+Input+Fields+for+HTML+Forms to Stumbleupon Add Multiple%2DChoice+Input+Fields+for+HTML+Forms to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor