Designing Web pages that your users will interact with is different from designing static Web pages. When you design a static Web page, you are usually more concerned with making it easy for people to navigate through your Web site. Most static pages also have several graphical elements that are used to make the page more visually interesting.

Web pages for data input are somewhat different. You need to use several HTML elements to organize the page and make it easy for your user to enter data and selections. Most of the Web form elements are based on GUI elements that have proven their usefulness over the years.

In addition to the GUI elements, you need to know how to work with HTML tables to organize the form. Although there are new browser techniques such as DHTML and CSS (Cascading Style Sheets) that can help with form layout, those techniques are only supported in the newer browser versions.

Figure 1 on the next page shows a sample HTML form that can be used for a Net.Data query. In this handout, you will review the form elements used on that form.

HTML01

Figure 1: Sample HTML prompting form for a query

HTML Prompting Options

The following HTML prompting options are used on the Prompting form:

· Radio buttons — Radio buttons are the round selection fields, for example, the selections for "All" and "Specific", and "And" and "Or". Radio buttons are always in groups of two or more and allow only one choice per group.

· Check boxes — Check boxes are the square boxes that have a check mark or are clear (see the "Specific" section of the prompting form). Check boxes can be used individually or in a group. You can select none or as many of the check boxes as required.

· Selection lists (drop–down) — Selection lists are used to contain a number of selections. When you code a selection list, you indicate how many choices are visible at a time and whether or not multiple selection in the list is allowed. Selection lists are used where you have many choices but need to conserve space on the form.

· Text fields — Text fields are used to allow user inputs. The text fields on the prompting form are in the Where section.

· Submit buttons — Submit buttons are used on an HTML form to cause some action to occur. There are two standard submit buttons used in HTML: Submit (submit the form to the Web server) and Reset (set all fields on the form back to their original values). You can define additional buttons if you include a small amount of JavaScript code to work with the buttons.

You can combine these and other GUI elements with other text, graphics or HTML page layout features to create the forms needed by your application.

Using HTML tables to organize a form

The Prompting form shown in Figure 1 makes extensive use of HTML tables. Tables are used when you need to control the spacing and alignment of elements on your forms. If you do not use tables, you have few options available to control how the form is rendered unless you use Dynamic HTML (DHTML).

Radio buttons

Radio buttons are used to select one of several mutually exclusive choices. Radio buttons that are used together are assigned the same group name. If a radio button is already selected and you select another in the same group, the button that was already selected loses its selected status.

There are two groups of radio buttons used on the Prompting form. The groups are shown in Figure 2 and Figure 3.

HTML04

Figure 2: Radio buttons used in the Select section.

HTML05

Figure 3: Radio buttons used in the Where section.

Unique names for groups

To use multiple groups of radio buttons on a form, you must assign each group a unique name. For example, if you assigned the same group name to the Select and Where radio buttons, you would only be able to select one of the four radio buttons.

You also need to provide more than one radio button per group. If you only include one radio button in a group and the user selects it (if it was not previously selected when the form was initially displayed), there is no way for the user to clear the radio button, other than by providing a Reset button (which clears all fields on the form). If you need to provide a single field for an on/off selection, use a check box.

Code for radio buttons

The HTML code for a radio button is:

<input type=”radio”

name=”GROUP_NAME”

value=”value_for_this_selection”

checked>

text_for_the_radio_button

Where:

· type=”radio” identifies the input field type as a radio button.

· name=”GROUP_NAME” is used to assign the group name that the radio button is in.

· value=”value_for_this_selection” is the value returned to server application when the radio button is selected. You can assign any value you need for your application.

· checked is an optional setting that you can assign to one radio button. It means that the selection is to be shown as checked when the form is initially displayed. You can use this to set a default option. You should only use checked for one radio button in a group.

· text_for_the_radio_button is the text that is displayed to the immediate right of the radio button itself, and is used to identify the purpose of the radio button.

For example, the HTML code for the two radio buttons in the Select section (Figure 2) is:

<input type=”radio”

name=”FORM_SELECT”

value="ALL"

CHECKED>

All

<input type=”radio”

name=”FORM_SELECT”

value="SPECIFIC">

Specific

Because the name field for both radio buttons is FORM_SELECT, the radio buttons are in the same group and provide two mutually exclusive options. By default, the All option is checked when the form is initially displayed.

Field Naming Tip

You should include a prefix such as FORM_ on the fields used on your HTML forms. That way, you can easily tell that the field is coming from the form.

Check Boxes

Check boxes are used to select zero or more items on a form. A check box can also be used for a single choice field to allow an on/off type selection. Unlike radio buttons, each check box can be individually checked or cleared. Checking or clearing a check box has no effect on the setting of other check boxes, even if they are in the same group.

The Prompting form uses a group of check boxes to select columns from the queried table, as shown in Figure 4.

HTML06

Figure 4: Check boxes used in the Select section.

Value returned for a check box group

If you need to create a list of field selections, grouping the check boxes by name might give you the list you need. For example, the column selections from the check boxes in Figure 4 are used in the SELECT part of an SQL statement. The SELECT part is written like this:

SELECT partno,partds,partpr FROM...

When you assign all of the check boxes to the same group name, the value returned to the server application is a comma–delimited list of values assigned to the check boxes.

However, if you need to access individual check box values, you should not assign the check boxes to the same group name, since you will have to write code to extract the values from the comma–delimited list. For individual values, assign a unique name to each check box field.

Code for check boxes

The HTML code for a check box is:

<input type=”checkbox”

name=”GROUP_NAME” or “CHECKBOX_NAME”

value=”value_for_this_selection”

checked>

text_for_the_checkbox

Where:

· type=”checkbox” identifies the input field as a check box.

· name=”GROUP_NAME” or name=”CHECKBOX_NAME” is used to assign the check box to a group or as an individual check box. Values for group check boxes are returned in a comma–delmited list. The value for an individual check box is returned individually.

· value=”value_for_this_selection” is the value returned to the server application when the check box is selected. You can assign any value you need for your application.

· checked is an optional setting that you can assign to one or more check boxes. It means that the check box is to be shown as checked when the form is initially displayed. You can use this to set default values. Unlike radio buttons, you can apply the checked setting to as many check boxes as you want.

· text_for_the_checkbox is the text that is displayed to the immediate right of the check box itself, and is used to identify the purpose of the check box.

For example, the HTML code for the Part number and Description check boxes in the Select section (Figure 4) is:

<input type=”checkbox”

name=”FORM_SPECIFIC”

value="partno"

checked>

Part number

<input type=”checkbox”

name=”FORM_SPECIFIC”

value="partds">

Description

Because the name field for both check boxes is FORM_SPECIFIC, the check boxes are in the same group and provide two group options. By default, the check box for partno is checked when the form is initially displayed.

The following data is returned to the server application in the FORM_SPECIFIC variable when the form is submitted:

Ÿ If only the first check box is checked, the value partno is returned.

Ÿ If only the second check box is checked, the value partds is returned.

Ÿ If both check boxes are checked, the value partno,partds is returned.

Ÿ If neither check box is checked, no value is returned.

Selection (drop-down) lists

Selection lists are used to contain lists of values that the user can select from. The lists allow two types of selection:

Ÿ Single selection — Only one selection from the list is allowed. This is similar to using radio buttons.

Ÿ Multiple selection — The user can choose as many selections as required. This is similar to using check boxes.

There are also three styles of selection list:

Ÿ Drop–down — If the list is a single selection list and only one selection is visible at a time, the list is displayed on the form as a drop–down list.

Ÿ Scrolling — If the list is a multiple selection list, the list is displayed as a scrolling list if there are more selections than can be displayed at one time.

Ÿ List — If the number of elements in the list is equal to the number of elements that can be displayed at one time, the list is displayed in its entirety. The list can be a single or multiple selection list.

Selection lists are usually used when there are many options to select from and there is not enough space on the form to display all of the selections. If there is enough space and the number of selections is known in advance (that is, you are not building the list dynamically), you should consider using radio buttons or check boxes, since those user interface elements are easier to work with than selection lists.

The following figures show where drop–down selection lists are used on the Prompting form.

HTML07

Figure 5: The column name selection list is in the Where section.

HTML08

Figure 6: The condition selection list is in the Where section.

HTML09

Figure 7: The column name selection lists is in the Order By section.

Code for selection lists

The HTML code for a selection list uses two tags: SELECT and OPTION. The code for a drop–down selection list is:

<option value=”value_for_selection”>Text_1

<option value=”value_for_selection”>Text_2

</select>

Where:

Ÿ name=”SELECT_NAME” is used to assign a name to the selection list.

Ÿ size=”1” is used to indicate that only one list element is visible at a time. Because the MULTIPLE option is not included in the select tag, the list is displayed as a drop–down list.

Ÿ value=”value_for_selection” is the value returned to the Net.Data macro when the option is selected. You can assign any value needed for your application.

Ÿ Text_1 is the text displayed in the selection list for the option.

For example, the HTML code for the column name selection list shown in Figure 5 is:

<option value=" " >(not selected)

<option value="partno">Part number

<option value="partds">Description

<option value="partqy">Quantity

<option value="partpr">Price

<option value="partdt">Date

</select>

When a selection is made in the list, the value of FORM_COLSELECT_NAME_1 is set to the value of the selected item.

Other selection styles

Figure 8 shows some of the other selection styles you can use, followed by the code for each style.

HTML10

Figure 8: Additional selection styles.

Style: multiple selection allowed

<br>

<option value=”des01”>Cheescake

<option value=”des02”>Ice Cream

<option value=”des03”>Apple Pie

<option value=”des04”>Chocolate Cake

<option value=”des05”>Raspberry Tort