HTML 4_01 Weekend Crash Course - G. Perry
.pdf
Session 14—Adding Form Elements |
185 |
Although the user can select only one radio button from a group of radio button selections, you can display more than one group of radio buttons on a Web page at the same time. Therefore, the user can select a maximum of one radio button from each group, but on the whole Web page, multiple radio buttons will be selected.
To set up a radio button inside a <form> tag pair, insert the following <input> tag:
<input type=checkbox radio=nameOfRadioButton value=groupName [checked=checked]>
The optional (and seemingly redundant) checked=checked entry on one of the radio buttons makes it the default button in the list. Only one radio button can be the default. The following code produces the survey shown in Figure 14-3. The form contains three sets of radio buttons.
<form>
<H2>Computer Survey</h2>
<input type=radio name=machine value=”PC”> PC
<input type=radio name=machine value=”Mac” checked=checked> Mac
<br> <hr> <br>
<input type=radio name=RAM value=”Under64M”> Under 64 Meg <input type=radio name=RAM value=”64to128M”> 64 to 128 Meg <input type=radio name=RAM value=”Over128M”> Over 128 Meg
<br>
<hr>
<br>
<input type=radio name=disk value=”Under3G”> Under 3 Gig <input type=radio name=disk value=”3Gto7G” checked=checked> 3 Gig to 7 Gig
<input type=radio name=disk value=”Over 7G”> Over 7 Gig </form>
You’ll notice that a dot appears next to a selected radio button, whereas a checkmark appears next to a check box. Also, if a button is selected and the user clicks another radio button within the same group, the first selected radio button will become deselected. Notice that in Figure 14-3 two of the radio buttons are selected already by default because of the checked=checked attribute.
Afternoon Saturday—III Part
14 Session
186 |
Saturday Afternoon |
Figure 14-3
One and only one radio button can be selected from any group of radio buttons.
The name= attribute determines which set of buttons go together in a group.
Note
Creating Selection Lists
Selection lists, also known as list boxes, dropdown lists, scrolling lists, pick lists, and pull-down lists depending on their style, offer the user a list of choices from which to choose. Unlike check boxes or radio buttons, selection lists can consume very little screen space while still offering the user a large list of alternatives.
You’ve seen selection lists before. Figure 14-4 shows one Web site with a series of selection lists. One of the lists is open because the user clicked that list’s down arrow to view the options in the list. The remaining lists stay closed and save screen room.
Session 14—Adding Form Elements |
187 |
selection lists
click to open list
open selection list
Figure 14-4
Selection lists open to display the list of available choices.
|
Technically, a pick list is a selection list where the user can select |
|
one and only one item. In a way, a pick list is a replacement for a |
Note |
set of radio buttons: You can display a pick list or a list of radio |
button options when you want your user to select a single item |
|
|
from a list of items. A selection list, like a list of check boxes, |
|
allows for the selection of multiple items from the list. |
Displaying a selection list
To set up a selection list on your form, you must enclose the list inside <select> and </select> tags. The <select> tag informs the browser that a selection list is
Afternoon Saturday—III Part
14 Session
188 |
Saturday Afternoon |
about to appear. In addition to the name= attribute, you should specify a size= attribute that determines how many items appear in the list on the screen at one time. A list may have 40 options but may only show three on the screen, inside the closed selection list, at any one time. Scroll bars enable the user to scroll through the choices three at a time. You might choose to display only one item from the closed selection list. The closed selection lists in Figure 14-4 display only one item.
Each item in the selection list must appear between an <option> and </option> tag pair. The following code produces two selection lists, one with four options always appearing on the screen and the other with only one line appearing. The user can display all the values of the second selection list by clicking the list’s down arrow and viewing the rest of the options. The first item in each list is already selected because of the selected=selected attribute.
<form>
<h2>Peripheral Order</h2>
<h3>Printer Selection:</h3> <!-- This list spans 4 rows -->
<select name=printers size=4 multiple=multiple> <!-- first option is selected by default -->
<option selected=selected>PH LasetPrint 4EZ</option> <option>OKY DOKY InkJet 949</option> <option>Panamount InkJet Series a3</option> <option>Canyon BCJ 3 </option>
<option>Pioneers LaserQuiet </option> <option>Sonny 54 DaisyWheel </option> <option>Blue Moon Ribbonless </option> </select>
<br> <hr> <br> <h3>Storage Selection:</h3>
<!-- This list spans one row -->
<select name=storage size=1 multiple=multiple> <!-- first option is selected by default -->
<option selected=selected>Jazzy 2Gig removable</option> <option>Cheata 5 Gig</option>
<option>MaxStorage 3.9 Gig</option> <option>MaxStorage 8.7 Gig</option>
Session 14—Adding Form Elements |
189 |
<option>SlowMoving Tape System 4.1 Gig</option> <option>BroadStore 9 Gig removable</option> <option>One set of hole-punch cards</option> </select>
</form>
Figure 14-5 shows the two selection lists that appear from this code.
selection lists
click to open
Afternoon Saturday—III Part
14 Session
Figure 14-5
Two selection lists, one with four options displayed and another with only one option displayed
The multiple=multiple attribute enables the user to select multiple items from the selection list, unlike a pick list that would not contain this attribute. Most browsers support just the multiple attribute without the redundant =multiple assignment, but for future compatibility, you should assign the attribute.
190 |
Saturday Afternoon |
The user should keep the following things in mind when selecting multiple list items:
Hold the Ctrl key while clicking on each item.
When selecting items that appear together, click the top item, scroll down to display the final item, hold Ctrl and Shift, and click the final item. The browser will select all items between the first and final items inclusively.
Click on a selected item again to deselect it.
The values returned from the form’s e-mail or CGI script will be the selection list’s name assigned to each selected value’s text that appears between the <option> tags. In other words, one possible script from Figure 14-5’s session might contain the following data:
printers=PH LaserJet 4EZ printers=Canyon BCJ 3 storage=Jazzy 2Gig removable storage=Cheata 5 gig
storage=SlowMoving Tape System 4.1 Gig
The one-line selection list shown in Figure 14-5 is actually awkward because of the extremely small scroll bar. By not allowing for more than one line to show at one time, the size=1 attribute severely limits the usability of this control. Without multiple lines, the user has a difficult time determining how many items are actually selected. Perhaps the control should be expanded to display multiple lines at one time, or perhaps the data better fits a pick list where only one item can be selected from the list at one time. The next section explains how to set up a pick list.
Displaying a pick list
In the following situations, you want to display a pick list:
You want to devote only one line of the screen to the entire selection list, except when the user opens the list by clicking the down arrow.
The user can select one and only one item from the list.
Note
You can display a pick list and still specify a size attribute greater than 1. A scroll bar appears, and the pick list spans more than a single row. The user, however, will not be able to select more than one value if you do not specify the multiple=multiple attribute.
Session 14—Adding Form Elements |
191 |
If you do not initially set up the pick list with a selected=selected attribute specified, no option will be selected when the user first sees the list, but as soon as the user clicks the down arrow to open the list, the browser will select the first item in the list by highlighting that item. The user then can select a different item. Once the user selects an item by clicking on that item, the pick list closes back to a one-line selection list, and the clicked item becomes the item that appears in the one-row selection list box.
The following code displays the storage items as a pick list, and Figure 14-6 shows the resulting pick list open with one of the items selected by the user.
<h3>Storage Selection:</h3>
<!-- This list spans one row -->
<select name=storage size=1 > <option>Jazzy 2Gig removable</option> <option>Cheata 5 Gig</option> <option>MaxStorage 3.9 Gig</option> <option>MaxStorage 8.7 Gig</option>
<option>SlowMoving Tape System 4.1 Gig</option> <option>BroadStore 9 Gig removable</option> <option>One set of hole-punch cards</option> </select>
Submitting the Forms
Once the user finishes entering all the form’s control values, the user is ready
to submit the form’s data. You should supply a submit button at the bottom or on the side of your form that your user can click to submit the form for processing. Before clicking submit, however, the user might spot some data-entry errors. Therefore, the user may want to make changes to the form. You can give the user a way to reset the form completely, setting all values back to their initial default state, by offering a reset button. The following sections explain how to create both kinds of form buttons.
Afternoon Saturday—III Part
14 Session
192 |
Saturday Afternoon |
open pick list
Figure 14-6
The user can select one and only one item from a pick list.
Creating the submit button
The submit button sends the form’s data to the Web server’s CGI script, or to you via e-mail, depending on how you set up your form’s action. By clicking the submit button, your user tells the browser to ship the form’s data to its intended recipient.
When you’re ready to place the submit button on your form, enter the following command that uses an <input> tag:
<input type=submit value=”Finished”>
The button contains whatever text the value= attribute specifies, which, in this case, is Finished. Although you don’t have to put quotation marks around the attribute if you only want to label the button with a single word, it’s standard
practice to do so. As stated in earlier sessions, some HTML programmers put quotes
Session 14—Adding Form Elements |
193 |
around all attribute values, even numbers. Figure 14-7 shows the submit button at the bottom of a form.
Submit button
Figure 14-7
The submit button sends the form’s data to the Web server.
As with most buttons inside graphical user environments, the submit button has a three-dimensional appearance that changes when the user clicks the button so it looks as if the button were actually depressed.
Creating the reset button
The opposite of the submit button, the reset button clears all the values in all the form’s fields, resets all selection lists back to their original default values if any are specified, and enables the user to redo the form completely from the beginning.
Often, a submit button appears next to a reset button.
Afternoon Saturday—III Part
14 Session
194 |
Saturday Afternoon |
Note
Be careful where you place the reset button. The top-to-bottom, left-to-right nature of Web pages can encourage users to click the reset button when they mean to click the submit button, if the reset button appears too close to the final field on the form. As a matter of safety, separate the reset button from the submit button and from the rest of the form with a vertical line made from a graphic image. Then place the reset button within easy reach of the form, but not in a position where the user is likely to click the reset button by accident.
You should also use the <input> tag to create a reset button. The type will inform the browser of the kind of button you’re requesting. For example, here is the code to include a reset button:
<input type=reset value=”Erase all data - Start new form”>
Note
The browser handles both the resetting of fields and the submitting of data when the user clicks either the reset or the submit button. No further coding, other than the <input> tag that sets up each of these buttons, is required on your part. Once you place a reset button, for instance, you know that the form will reset when the user clicks the button without you having to do anything else.
As with the submit button, the reset button’s text will include all the text between the quotations in the value= attribute that you specify.
REVIEW
Display check boxes when you want to give users a list of choices from which they can select zero, one, or more options.
Radio buttons allow for mutually exclusive selections; that is, the user can select no more than one choice.
Selection lists save screen space because they scroll and open when requested.
You can fix a selection list at a specific number of rows, or you can specify a one-row selection list that opens when the user clicks the list’s down arrow.
A pick list does not allow for multiple selections, only one at a time.