Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P40 pps

The name and value pair associated with a hidden form field will be submitted along with the rest of the contents of the form when the form is submitted.. The File Upload Control The fil

Creating Form Controls with the <input> Tag

This example creates a button that runs a function called verifydata when it's clicked You provide the label that appears on the button with the value attribute of Verify Data

Unlike Submit buttons, regular buttons don't submit the form when they're clicked

Hidden Form Fields

Hidden form fields are used when you want to embed data in a page that shouldn't be seen or modified

by the user The name and value pair associated with a hidden form field will be submitted along with the rest of the contents of the form when the form is submitted To create such a field, set the field's type to hidden and be sure to include both the name and value attributes in your <input> tag Here's an example:

<input type="hidden" name="id" value="1402" />

Hidden form fields are generally used when data identifying the user needs to be included in a form For example, let's say you've created a form that allows a user to edit the name and address associated with her bank account Because the user can change her name and address, the data she submits can't

be used to look up her account after she submits the form, plus there might be multiple accounts

associated with one name and address You can include the account number as a hidden field on the form so that the program on the server knows which account to update when the form is submitted

The File Upload Control

The file control enables a user to upload a file when he submits the form As you can see in the following code, the type for the input element is set to file:

Input

<p>Please select a file for upload: <input type="file" name="fileupload" /></p>

If you want to use a file upload field on your form, you have to do a lot of behind-the-scenes work to get everything working For one thing, the program specified in the action attribute of your form must be able to accept the file being uploaded Second, you have to use the post method for the form Third, you must set the enctype attribute of the <form> tag to multipart/form-data I haven't discussed the enctype

attribute because this is the only case where you'll have to use it Ordinarily, the default behavior is fine, but you must change the enctype in this particular case

Let's look at a simple form that supports file uploads:

<form action="/cgi-bin/upload.cgi" enctype="multipart/form-data" method="post">

<input type="file" name="new_file" />

<input type="submit" />

</form>

After you've created a form for uploading a file, you need a program that can process the file

submission Creating such a program is beyond the scope of this book, but all popular web programming environments support file uploads

Using Other Form Controls

Using Other Form Controls

In addition to form controls you can create using the input element, there are three that are elements in and of themselves

Using the button Element

A button you create using the button element is similar to the buttons you create with the input

element, except that content included between the opening and closing button tags appears on the

button

Note

The button element (as opposed to the input element of type="button") is not supported by

versions of Netscape prior to version 6

You can create three different types of buttons: Submit, Reset, and Custom The <button> tag is used to create buttons As with other form fields, you can use the name attribute to specify the parameter sent to the server, and the value attribute to indicate which value is sent to the server Unlike buttons created with the <input> tag, the button's label is specified by the content within the <button> tag, as seen in this code:

Input

<button type="submit"><b><i>Submit button</i></b></button>

<button type="custom"><img src="recycle.gif"></button>

The button element is shown in a browser in Figure 10.11

Output

buttons.

With the <button> tag, white space counts If you include white space between the opening or closing

<button> tags and the content inside the tag, it might make your button look a bit odd The best bet is

to just leave out that white space

Creating Large Text-Entry Fields with textarea

The textarea element creates a large text entry field where people can enter as much information as they like To create a textarea, use the <textarea> tag To set the size of the field, use the rows and cols

attributes These attributes specify the height and width of the text area in characters A text area with

cols set to 5 and rows set to 40 creates a field that's 5 lines of text high and 40 characters wide If you leave out the rows and cols attributes, the browser default will be used This can vary, so you should make sure to include those attributes to maintain the form's appearance across browsers The closing

textarea tag is required and any text you place inside the textarea tag is displayed inside the field as the default value:

Input

<p>Please comment on our customer service.<br />

<textarea name="question4" rows="10" cols="60">Enter your answer here

</textarea>

</p>

Figure 10.12 shows a textarea element in action

Output

[View full size image]

Using Other Form Controls

Tip

You can also change the size of a textarea with the height and width CSS properties (You

can also alter the font using the CSS font properties as well.)

Creating Menus with select and option

The select element creates a menu that can be configured to enable users to select one or more options from a pull-down menu or a scrollable menu that shows several options at once The <select> tag

defines how the menu will be displayed and the name of the parameter associated with the field The

<option> tag is used to add selections to the menu The default appearance of select lists is to display a pull-down list that enables the user to select one of the options Here's an example of how one is

created:

Input

<p>Please pick a travel destination:

<select name="location">

<option>Indiana</option>

<option>Fuji</option>

<option>Timbuktu</option>

<option>Alaska</option>

</select>

</p>

To create a scrollable list of items, just include the size attribute in the opening select tag, like this:

Input

<select name="location" size="3">

Figure 10.14 shows the same select element as Figure 10.13, except that the size attribute is set to 3 Setting the size to 3 indicates that the browser should display three options at once

Output

To see the fourth item, the user would have to use the scrollbar built into the select list By default, the value inside the <option> tag specifies both what is displayed in the form and what's sent back to the server To send a value other than the display value to the server, use the value attribute The following code, for example, causes bw499 to be submitted to the server as the value associated with the Courses

field instead of Basket Weaving 499:

Using Other Form Controls

<option value="p101">Programming 101</option>

<option value="e312">Ecomomics 312</option>

<option value="pe221">Physical Education 221</option>

<option value="bw499">Basket Weaving 499</option>

</select>

To select an option by default, include the selected attribute in an option element, as in the following:

<select name="courses">

<option value="p101">Programming 101</option>

<option value="e312">Ecomomics 312</option>

<option value="pe221" selected="selected">Physical Education 221</option>

<option value="bw499">Basket Weaving 499</option>

</select>

Thus far, you've created menus from which a user can select only one choice To enable users to select more than one option, use the multiple attribute:

<select name="courses" multiple="multiple">

Note

A user can choose multiple options by Shift+clicking for Windows, or Ctrlclicking or

Commandclicking for Macintosh

There are some usability issues associated with select lists When you think about it, select lists that enable users to choose one option are basically the equivalent of radio button groups, and select lists that allow multiple selections are the same as check box groups It's up to you to decide which tag to use in a given circumstance If you need to present the user with a lot of options, select lists are

generally the proper choice A select list with a list of states is a lot more concise and usable than a group of 50 radio buttons By the same token, if there are four options, radio buttons probably make more sense The same rules basically hold with check box groups versus multiple select lists

The other usability issue with select lists is specific to multiple select lists The bottom line is that they're hard to use Most users don't know how to select more than one item, and if the list is long enough, as they move through the list they'll have problems keeping track of the items they already selected when they scroll through to select new ones Sometimes there's no way around using a multiple select list, but you should be careful about it

Task: Exercise 10.2 Using Several Types of Form Controls

The purpose of this exercise is to show you how to create forms that incorporate a number

of different types of form controls In this case, the form will include a text field, a radio button group, a select list, a check box group, a file upload field, and a text area The form

is laid out using a table Even though CSS is superior to tables for laying out most kinds of pages, forms are still well suited to being laid out using tables The form, rendered in a browser, appears in Figure 10.15

Figure 10.15 A registration form for a website.

[View full size image]

Let's look at the components used to build the form The page's header and body tag are what you would expectnothing interesting After some introductory text, we open the form like this:

<form action="/cgi-bin/register.cgi" method="post"

enctype="multipart/form-data">

Using Other Form Controls

Because this form contains a file upload field, we have to use the post method and the

multipart/form-data enctype in the <form> tag The action attribute points to a CGI script that lives on my server Next, we open the table that will be used to format the controls in

my form The first row of the table contains the first row in the form:

<tr>

<td align="right"><b>Name:</b></td>

<td><input name="name" /></td>

</tr>

As you can see, the table has two columns We use the left column for labels and the right column for the form controls themselves The first field is a text field The only attribute included is name because the default values for the rest of the attributes are fine

The next row includes two radio buttons:

<tr>

<td align="right"><b>Gender:</b></td>

<td>

<input type="radio" name="gender" value="male" /> male

<input type="radio" name="gender" value="female" /> female

</td>

</tr>

As you can see, the radio button group includes two controls (both with the same name, establishing the group) Because we didn't include line breaks between the two fields, they appear side by side in the form The next field is a select list that enables the user to

indicate which operating system he runs on his computer:

<tr>

<td align="right">Operating System:</td>

<td><select name="os">

<option value="windows">Windows</option>

<option value="macos">Mac OS</option>

<option value="linux">Linux</option>

<option value="other">Other </option>

</select></td>

</tr>

This select list is a single-line, single-select field with four options Rather than using the display values as the values that will be sent back to the server, we instead opt to set them specifically using the value attribute of the <option> tag The next form field is a check box group:

<tr>

<td><input type="file" name="portrait" /></td>

</tr>

The use of the post method and the multipart/form-data enctype are necessitated by the file upload field The last input field on the form is a text area intended for the user's bio

<tr>

<td valign="top" align="right">Mini Biography:</td>

<td><textarea name="bio" rows="6" cols="40"></textarea></td>

</tr>

After the text area, there's just the Submit button for the form After that, it's all closing tags for the <table> tag, <form> tag, <body> tag, and the <html> tag The full source code for the page follows, along with a screenshot of the form as shown earlier in Figure 10.15

Input

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Registration Form</title>

</head>

<body>

<h1>Registration Form</h1>

<p>Please fill out the form below to register for our site Fields

with bold labels are required.</p>

<form action="/cgi-bin/register.cgi" method="post"

enctype="multipart/form-data">

<table>

<tr>

<td align="right"><b>Name:</b></td>

<td><input name="name" /></td>

</tr>

<tr>

<td align="right"><b>Gender:</b></td>

<td>

<input type="radio" name="gender" value="male" /> male

<input type="radio" name="gender" value="female" /> female

</td>

</tr>

<tr>

<td align="right"><b>Operating System:</b></td>

<td><select name="os">

<option value="windows">Windows</option>

<option value="macos">Mac OS</option>