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

<option value=”des06”>Frozen Yogurt

</select>

<br>

Style: scrolling selection

<br>

<option value=”bev01”>Coffee

<option value=”bev02”>Tea

<option value=”bev03”>Lemonade

<option value=”bev04”>Carrot juice

</select>

<br>

Style: list

<br>

<option value=”din01”>Salmon

<option value=”din02”>Chicken

<option value=”din03”>Roast Beef

<option value=”din04”>Pork Loin

<option value=”din05”>Dungeness Crab

<option value=”din06”>Steamed Rice

</select>

There are two techniques you can use to select items in a multiple selection list:

Ÿ Single selection — Select multiple individual items in the list by holding the Control (Ctrl) key on the keyboard when clicking an item. Clicking on a previously selected item deselects the item.

Ÿ Group selection — You can select a group of items in the list by clicking the first item in the group, then hold the Shift key on the keyboard and click the last item in the group. All of the items between the first and last item are selected.

User Interface Tip

If you have a multiple selection list, you should set the size of the list (number of elements displayed) greater than one. As you can see in Figure 8, the one–item visible scrolling list (Coffee) is very difficult to work with, and almost impossible to select multiple items with. Users have enough trouble working with multiple selection lists even when more items are visible; don't make it more difficult by limiting the number of items displayed to one.

Text (input) Field

Text fields are used to allow the user to enter a string of any characters. Unlike the AS/400 Data Description Specification (DDS) panels, there is no way of limiting a text field to contain only numbers or only letters. The user can enter any characters on their keyboard into the text field. It is up to your server application to edit the entry before using it for database operations.

There are two text fields used on the Prompting form. One of the fields is shown in Figure 9.

HTML11

Figure 9: One of the two text fields in the Where section.

In this case, the text field lets the user enter a value to be compared with the Price column in the database.

Code for text fields

The HTML code for a text field is:

<input type=”text”

name=”NAME_FOR_TEXT_FIELD”

value=”value_to_display”

size=”number_of_chars”

maxlength=”number_of_chars”>

Where:

Ÿ type=”text” identifies the input field as a text field.

Ÿ name=”NAME_FOR_TEXT_FIELD” is used to assign a name to the field. Each text field on the form must have a unique name.

Ÿ Value=”value_to_display” is used to specify the characters that are to be displayed in the text field. This is similar to using an Output or Both field in DDS.

Ÿ size=”number_of_chars” specifies the amount of space to reserve on the form to display the text field. The number of characters that can be displayed at once is equal to the value you specify.

Ÿ maxlength=”number_of_chars” specifies the maximum number of characters allowed for the text field. If this value is greater than the value specified for size, the text field scrolls. If possible, both values should be set to the same length. Also, for database applications, you should always specify a value for maxlength.

For example, the HTML code for the text field shown in the Where section (Figure 9) is:

<input type=”text”

name=”FORM_COLSELECT_VALUE_1”

size=”10”

maxlength=”20”>

Editing text fields in the browser

if you write scripting code, you can edit text fields in the browser before the data is sent to your server application. There are two widely used scripting languages:

Ÿ JavaScript — This is supported by Netscape Navigator and Microsoft Internet Explorer. Despite its name, JavaScript has nothing to do with Java. Because this is supported by both browsers, this is probably the scripting language you will use.

Ÿ VBScript — This is supported by Microsoft Internet Explorer and as a chargeable "plug–in" for Netscape Navigator (meaning that it is not widely used by people who use Netscape Navigator as their browser). This is a subset of Microsoft's Visual Basic language. If you are creating Web applications for an intranet environment where the standard is Microsoft Internet Explorer, this is a good choice. For publicly available Web applications, this is not a good choice.

Tech Tip

You can find more information about JavaScript and many samples of editing code that can be used to validate Web forms at Netscape's JavaScript site:

http://developer.netscape.com/tech/javascript/index.html

Hidden field

One of the problems you will encounter when you develop a multiple-form Web application is that the values entered on previous forms are not retained by the server, unless you use the persistent CGI technique available with IBM HTTP Server for AS/400.

One of the techniques you can use to pass values from one form to another (and back to the server again) is to use HTML hidden fields. When you define a hidden field, it is not displayed in the browser. However, the user can view the HTML source code sent to the browser and see the value of the hidden fields by using the browser’s View Source option.

Submit button (single)

After entering values on a Web form, you need some way to indicate to the browser that it is to send the form data to the Web server. For Net.Data macros, you also need to indicate the section of the macro that is to handle the form data.

The SUBMIT input type provides a button on the form. When clicked, the browser sends the form input to the Web server. The SUBMIT button requires a FORM statement so that it knows how to process the form when the button is clicked.

Code for submit button

Sample HTML for working with a SUBMIT button is:

<input type=”submit”

value="Start the Web App">

Where:

Ÿ action="QUERY" is used to indicate the name of the Net.Data macro section that is to process the form data.

Ÿ method=”POST” is used to indicate how the data is sent from the browser to the Web server (the data is sent in the STDIN stream file).

Ÿ type=”submit” defines the input field as a submit button.

Ÿ value="Start the Web App" is the caption displayed on the submit button.

You can only have one SUBMIT button per form, since the SUBMIT button is tied to the form statement. Although this is usually sufficient for simple forms, you need to use the next technique if you want multiple buttons on your form.

Submit buttons (multiple)

When you need to send the same form data to different sections of a Net.Data macro or to different server applications, you need to use an alternate technique to the SUBMIT button. By using the BUTTON input type, you can define and use as many buttons as you require. The BUTTON type looks the same to the user, so there are no special user interface issues raised by using it.

Figure 10 shows two BUTTON input types used on the Prompting form:

HTML12

Figure 10: Two BUTTON input types are used for these buttons.

JavaScript for multiple buttons

To use the BUTTON input type, you need to provide a JavaScript function that performs the submit on behalf of the button. JavaScript code is usually placed in the <head> section of an HTML file:

<head>

function SubmitForm(formAction) {

document.myForm.action = formAction;

document.myForm.submit();

}

</script>

</head>

Where:

Ÿ script language=”JavaScript” identifies the scripting language used.

Ÿ function SubmitForm(formAction) identifies the function named SubmitForm and its parameter list of one item named formAction.

Ÿ document.myForm.action = formToSubmit; sets the action for the form named myForm to the value of the parameter passed to the function.

Ÿ document.myForm.submit(); actually submits the form and its data to the Web server, using the action value passed to the function.

Ÿ </script> marks the end of the JavaScript code in the HTML file.

Code for input button

The code in the form that defines the form and the button is:

<input type=”button”

value="Submit Query"

onClick=SubmitForm("QUERY")>

Where:

Ÿ name=”myForm” defines the name of the form (see the JavaScript section for the reference to the form's name).

Ÿ method=”POST” indicates how the form data is sent to the Web server.

Ÿ type=”button” indicates that a button is used.

Ÿ value="Submit Query" is the caption on the button.

Ÿ onClick=SubmitForm("QUERY") is used to invoke the JavaScript SubmitForm function and pass it the parameter value QUERY when the button is clicked.

Because you can pass any value you want for the function parameter, you can invoke as many different sections of a Net.Data macro or start as many different server applications as you require.

Using Tables

One of the main techniques you will use to present well-organized Web pages is HTML tables. By using a table, you force the browser to display form elements in a fixed, aligned order, rather than its default “best-fit” order.

Table tags

There are three main tags you need to be proficient with to use tables. Each of these tags has a corresponding end tag:

Ÿ <table> tag – marks the beginning of a table.

Ÿ <tr> tag – marks the beginning of a table row.

Ÿ <td> tag – marks the beginning of table data (a “cell”) within a table row.

For example, some simple HTML for a table looks like this:

<tr>

<td>This is the first cell</td>

<td>This is the second cell</td>

<tr>

</tr>

</table>

Note that although code indentation is optional in HTML, you will probably find it very useful to indent table tags. This is especially the case when you use embedded tables.

Sample embedded table

Figure 11 shows part of the prompting form that was originally presented in Figure 1. This part of the form uses an embedded table to display the “All” and “Specific” sections.

HTML13

Figure 11: Sample of embedded tables

The code for the embedded tables sample is as follows:

<html>

<head>

<title>Use Tables for layout</title>

</head>

<body>

<h1>SQL Query over Parts table</h1>

<!----------------------------------------------------

Start of main table

----------------------------------------------------->

<table bgcolor="oldlace"

border="1">

<!-----------------------------------------------

Table caption row

------------------------------------------------->

<tr>

<td bgcolor="navy"

colspan="2"

align="middle">

<font color="white"

size="+1">

<b>Column Selection</b>

</font>

</td>

</tr>

<!-----------------------------------------------

Select row

------------------------------------------------->

<tr>

<td>

Select:

</td>

<!-------------------------------------------

Start of nested table

--------------------------------------------->

<td>

<!-----------------------------------

All radio button

------------------------------------->

<tr>

<input type="radio"

name="FORM_SELECT"

checked>

All

</td>

</tr>

<!------------------------------------

Specific radio button

------------------------------------->

<tr>

<td>

<input type="radio"

name="FORM_SELECT">

Specific

</td>

<!--------------------------------

Check boxes for Specific

---------------------------------->

<td>

<input type="checkbox"

name="FORM_SPECIFIC"

value="partno"

checked>

Part number

<input type="checkbox"

name="FORM_SPECIFIC"

value="partqy">

Quantity

<input type="checkbox"

name="FORM_SPECIFIC"

value="partdt">

Date

<br>

<input type="checkbox"

name="FORM_SPECIFIC"

value="partds">

Description

<input type="checkbox"

name="FORM_SPECIFIC"

value="partpr">

Price

</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>