HTML 4_01 Weekend Crash Course - G. Perry

Session 13—Forms Add Function

175

Keep in mind that the tabindex= is a relatively new HTML attribute and not all recent browsers support it. However, it doesn’t hurt to specify a tab order.

Note

Sometimes, you’ll want your users to enter a secret code in a field. Perhaps you want a password, credit card, or other data that the user may not want to appear on the screen. Someone might be looking over the user’s shoulder, so you should hide the data as your user enters that data.

The type=password attribute, as opposed to type=text, inside the <form> tag handles passwords and other secret data for you. When you use a form with a password field, asterisks (*) appear on the user’s screen as the user types the characters in the password.

The following code contains a password field:

<form method=post> <p>

<font face=”Monospace”> Please type your full name:

<input type=text name=fullName></p>

<!-- The nonbreaking space codes ensure that the fields line up -->

<p>  Please type your address: <input type=text name=address></p>

<!-- The password will be hidden --> <p>   Please enter a password:

<input type=password name=UserPassword size=10 maxlength=8> </p> </font>

</form>

The password field is not only set so that asterisks appear as the user types, but the field is also limited to ten characters wide, and the user can enter only eight characters maximum. The extra spacing adds some padding that looks better on the screen than if you allowed a width that was the same limit as the password’s maximum length. Figure 13-5 shows the resulting form.

Afternoon Saturday—III Part

13 Session

176	Saturday Afternoon

Figure 13-5

Hide passwords in Web page form fields to protect your users.

Further Field Refinement

You cannot control exactly how your users enter data. In other words, no form can be perfect because no user is perfect. You might want an address, but the user enters a phone number. Therefore, you’ll have some data validation to perform once you receive your data. Check to make sure, for example, that your user didn’t enter a negative age or a state abbreviation that’s not one of the 50 states. The problem is that you cannot validate data inside HTML.

	The CGI script that you or someone else writes for your Web
	server can perform some data validation. For example, if the user
Tip	enters too few digits for a social security number, the CGI script
	can inform the user of the bad value and display the form again
	with the social security field blank.

Although you cannot perform true validation, you can help guide users by prefilling some fields for them. For some fields, you know the user’s value in advance. For example, the city and state might almost always be your own city and state if your program collects data from local residents only, or if you are writing HTML Web pages for a company’s intranet where all users reside at the same site. For such fields, you may want to supply default values — values that appear in the fields that your users can keep, or change if the data happens to be incorrect.

Session 13—Forms Add Function

177

Use the value= attribute to specify a default value. The following code does that:

<p>Please type your state:

<input type=text name=address value=”CA” size=2 maxlength=2> </p>

Default values require the quotes around the default value that you specify in the HTML code.

Note

As Figure 13-6 shows, the state abbreviation CA automatically appears as the default value, but the user can change the state if another happens to be correct. By supplying a default with the most likely value, you speed up your users’ data entry and accuracy.

Figure 13-6

Supply common data values for your users.

Large Text Areas

You do not have to limit input fields to a single line. Your input fields can span several rows and columns. These text areas enable users to enter freeform text. Such text may be beneficial for getting a user’s input in sites such as:

Sites that ask for user feedback on the site’s design

Customer service sites that require an explanation when the user requests a return authorization

Afternoon Saturday—III Part

13 Session

178	Saturday Afternoon

Message board sites that ask the users for their opinions

A large text area might also be needed on sites that request specific contact information, such as name and address requests, to give the user an area for special instructions, such as the name and address form shown in Figure 13-7.

Text area

Figure 13-7

A large text area for special instructions is provided on this form.

Note

The text area’s scroll bar becomes active when the user types more lines of text than will fit inside the text areas that you set up. The text will fit once the scroll bar becomes active.

The <textarea> and </textarea> tags enclose the field you want to specify as a text area. The <textarea> tag supports the following attributes:

name= Names the text area field so that the CGI script or e-mail that comes back to you can identify the text area value.

rows= Specifies the number of screen rows that you want to provide for the text area.

cols= Specifies the number of screen columns (characters) that you want to provide for the text area.

Session 13—Forms Add Function

179

wrap= Determines whether or not the text automatically wraps within the text area. Without the wrap attribute, the browser may or may not wrap complete words within the text area.

You can also specify default text within a large text area by putting text between the <textarea> and </textarea> tags. For example, the following tags create a text area that spans 3 rows and 25 columns and displays Mailing information as default text in the text area:

<p><textarea name=mailinginfo rows=3 cols=25 wrap> Mailing information

</textarea>

	A read-only attribute exists (specified as readonly=readonly)
	for text areas where you want to display text but not allow the
Tip	user to enter new text. You, thereby, show default text that the
	user cannot change. Depending on the user’s settings, you may
	want to offer the text area as a read-only for some users or for
	some of your Web pages. The read-only text area maintains the
	form’s appearance while displaying the read-only text for your
	users. At a later time, or in another Web page, the same form
	might appear without the read-only attribute.

REVIEW

Forms allow you to obtain structured and ordered answers from your Web page users.

The <form> and </form> tags create the form.

The user enters data in the form’s fields.

You control the name of the fields and their descriptions so you can distinguish the fields from one another when the data returns to you via e-mail or CGI script.

Although you can’t perform true validation on forms, you can pre-fill or add default values to some fields to help prevent the inputting of invalid data.

Text areas hold large amounts of information.

Afternoon Saturday—III Part

13 Session

180	Saturday Afternoon

QUIZ YOURSELF

1.True or False: The CGI script runs on the Web server’s computer. (See “CGI Retrieves Your Data.”)

2.What appears on the screen in a password field? (See “Managing Form Fields.”)

3.Where do you send your form for user accuracy validation? (See “Further Field Refinement.”)

4.What is a default value? (See “Further Field Refinement.”)

5.What is the difference between a text field and a text area? (See “Large Text Areas.”)

S E S S I O N

14

Adding Form Elements

Session Checklist

Create check boxes for your forms

Place radio buttons on your forms

Display selection lists, including pick lists, on your forms

Learn how to create the submit and reset buttons to enable users to either submit the form’s data or redo the form

This session expands on the previous session’s lesson about forms. In this session, you will learn additional controls that you can place onto forms that enable your users to indicate choices and select optimum options. You’ll learn

how to place controls such as check boxes, radio buttons, selection lists, and reset and submit buttons, all of which are common to most users of graphical user interfaces such as the Macintoshand Windows-based platforms.

Creating Check Boxes

Figure 14-1 shows a form with check boxes. When you set up check boxes, you can place one or more check box items on a form. In addition, you can check one or

182	Saturday Afternoon

more of the items by default so the user doesn’t have to change anything if he or she wants to accept the default values. By clicking a check box, the user either selects or deselects the check box item. Generally, you’ll use check boxes when your user must choose zero, one, or more items from a list of several items.

selected check boxes

Figure 14-1

The user selects one or more newsletters to receive by clicking one or more check boxes.

Notice that a check box has a description and a box to the right of the description. When checked, the box displays a checkmark that indicates the user’s preference.

To set up a check box, inside a <form> tag pair, insert the following <input> tag:

<input type=checkbox name=nameOfCheckbox value=groupName>

In the preceding tag, nameOfCheckbox is a name you supply so that the subsequent CGI script can store the value in a unique location, or so that the e-mail you receive from the form will have a name to assign the user’s value to. The value=

Session 14—Adding Form Elements

183

attribute is the value assigned to that name in the CGI script or the e-mail that comes back to you from the form. In addition, the checked=checked attribute lets you set up default values in your check boxes.

Consider the following code that sets up six check box options:

<form>

<br><br>Please select your favorite vegetables: <br><br><input type=checkbox name=Veggies value=”Potatoes” checked=checked> Potatoes

<br><input type=checkbox name=Veggies value=”Cabbage” > Cabbage <br><input type=checkbox name=Veggies value=”Corn” checked=checked> Corn

<br><input type=checkbox name=Veggies value=”Carrots” > Carrots <br><input type=checkbox name=Veggies value=”Legumes” > Beans <br><input type=checkbox name=Veggies value=”Peas” > Peas

</form>

Figure 14-2 shows the form with check boxes that results from this code. Potatoes and corn have default checks set up, as indicated by the checked=checked attributes. Although you don’t have to assign a value to the checked attribute, doing so ensures that your Web site will be compatible with future browsers that might require the assignment for consistency.

At first, it may seem strange that the name attribute values for each of the check boxes is the same and that the value= attributes are all different. Also, the value= attributes seem to match the text that appears on the screen next to the check box.

The name= attribute indicates the name that appears in the CGI script or e-mail that comes back to you, and the value assigned to that name is the value following value=, as mentioned earlier. Therefore, if the user selects all six of the vegetables, the values that the form will produce are:

veggies=Potatoes

veggies=Cabbage

veggies=Corn

veggies=Carrots

veggies=Legumes

veggies=Peas

Afternoon Saturday—III Part

14 Session

184	Saturday Afternoon

Figure 14-2

Producing the check boxes is a simple task.

Notice that the fifth value assigned is Legumes, the same value as the value= attribute for that item. The description that appears on the screen, however, is Beans because Beans is the description that follows the <input> tag and that’s the value that appears as text next to the check box.

Creating Radio Buttons

Once you master check boxes, radio buttons are extremely easy. They are almost exactly the same as check boxes except that radio buttons allow only zero or one choice from the entire group of radio buttons.

Note

In older cars, radios had push buttons that selected one and only one radio station at a time. When you pushed one button in, whatever button that was pushed in previously popped out. Radio buttons act the same way on forms.