If you have a list of predefined values that the user can choose, it may be easier to put them in a selection list rather than allowing them to type it in themselves. This makes for fewer typos on the user's part.
For example:
<form name="example6" id="example6">
<select name="year" id="year">
<option>Freshman</option>
<option>Sophomore</option>
<option>Junior</option>
<option>Senior</option>
<option>Grad Student</option>
</select>
</form>
The default appearance of a selection list is that only the first item appears at a time, with an arrow that the user clicks to see the rest of the options. You can set the number of items that appear with the "size" attribute:
<select size=”value”>...</select>
where value is the number of items displayed. For example:
<form name="example7" id="example7">
<select name="author" id="author"
size="3">
<option>Stephen King</option>
...
</select>
</form>
The default is that a user may select exactly one item from a selection list. By using the multiple attribute you can change this:
<select multiple=”multiple”>...</select>
To make multiple selections, the user must hold down an access key while clicking on a choice:
Option values
By default, the value displayed is the value that is sent to the server. Sometimes you may want to send an abbreviation, or code. Do this with the "value" attribute:
<option value=”1”>content</option>
Item originally selected
You can also specify which item is originally selected with the "selected attribute":
<option selected=”selected”>content</option>
Option groups
You can set up the option list to group similar items together with "option groups":
<form name="example7" id="example7">
<select name="author" id="author"
size="5">
<optgroup label="Male Authors" >
<option>Stephen King</option>
<option>Narain Gehani</option>
<option>Phil Rickman</option>
<option>Iain M. Banks</option>
<option>Leo Tolstoy</option>
</optgroup>
<optgroup label="Female Authors">
<option>Sue Grafton</option>
<option>Lauran Paine</option>
<option>Amanda Quick</option>
</optgroup>
</select>
</form>
"Option buttons" or "radio buttons" are similar to selection list in that they give the user a set of items to choose from. However, a user may choose only 1 option button at a time from a group. The format looks like this:
<input type=”radio” name=”name” id=”id” value=”value” />
where "name" identifies the field that contains the collection of option buttons, "id" identifies the specific option and "value" is the value that is sent to the server when that option is selected.
</form>
<form name="example8" id="example8">
<input type="radio" name="yr"
id="frosh" value="1" />
<label for="frosh">Freshman</label>
<input type="radio" name="yr"
id="soph" value="2" />
<label for="soph">Sophomore</label>
<input type="radio" name="yr"
id="jun" value="3" />
<label for="jun">Junior</label>
<input type="radio" name="yr"
id="sen" value="4" />
<label for="sen">Senior</label>
</form>
All the option buttons that belong to the same field have the same name.
By default, none of the buttons are checked, but you can add a "checked" attribute to one of the options:
<input type=”radio” checked=”checked” />
Depending upon the number of items in the list and whether or not the use can choose more than one is how you decide to use either a selection list or option buttons. If you have a short list where only one can be chosen, use the option buttons, a longer list, or the user can choose more than one thing, go with the selection list.
You can add a label to an entire group of option buttons by creating a "field set". Most browsers place a group box around a field set to show that these fields belong together. The format looks like this:
<fieldset>
fields
</fieldset>
where the fields are the fields with in the field set. You can add a "legend" element to put a label on the group. By default the legend text is placed in the top left corner of the group box. To do this, you need:
<legend>label for box</legend>
Here is an example with a legend:
<form name="example8" id="example8">
<fieldset>
<legend>Choose your year in school</legend>
<input type="radio" name="yr"
id="frosh" value="1" />
<label for="frosh">Freshman</label>
<input type="radio" name="yr"
id="soph" value="2" />
<label for="soph">Sophomore</label>
<input type="radio" name="yr"
id="jun" value="3" />
<label for="jun">Junior</label>
<input type="radio" name="yr"
id="sen" value="4" />
<label for="sen">Senior</label>
</fieldset>
</form>
There is no attribute that allows you to control the size of the group box. It will be as high as it needs to be and as wide as the browser window. If you want it to be set to a specific value (width) you need to put it in a table cell.
A check box is either checked or not (yes or no). The format looks like this:
<input type=”checkbox” name=”name” id=”id” value=”value” />
"Name" and "id" should be the same and "value" is required for every checkbox. The default is not checked, but you can change that with the "checked" attribute:
<input type=”checkbox” checked=”checked” />
Again you may also include a label and fieldset with a legend.
You can also create a textarea box that is larger than an input box:
<textarea name=”name” id=”id”
rows=%rdquo;value” cols=”value”>
default text
</textarea>
where the rows and cols define the dimensions of the box. Notice also that this is a two sided tag and you need both even if you have no default text.
One more example:
<form name="example9" id="example9">
<fieldset>
<legend>What are your favorite dogs?</legend>
<input type="checkbox" name="bc"
id="bc" checked="checked" value="yes"
/>
<label for="bc">Border Collie</label>
<input type="checkbox" name="ig"
id="ig" value="yes" />
<label for="ig">Italian Greyhound</label>
<input type="checkbox" name="gs"
id="gs" value="yes" />
<label for="gs">German Shepard</label>
<input type="checkbox" name="be"
id="be" value="yes" />
<label for="be">Beagle</label>
<textarea name="why" id="why"
rows="5" cols="40">
Tell us why!
</textarea>
</fieldset>
</form>