Forms Course

There are other INPUT TYPE fields that can be used within a form. In this next section we will identify them and give a example of the code to use. Use these codes in a form the very same way as you used the other INPUT type fields from the lesson you just finished.

You can hide information within the form that is submitted but not seen directly on the form itself, although the user can always view the source code of the web page and see this hidden information. You may need to have some information submitted with the form that either gives a command to the CGI server or just information for identification of that particular form.

<INPUT TYPE="hidden" NAME="descriptive text" VALUE="hidden value here">

The SELECT field allows the user to select an item from a list box and submit it with the form.
The SIZE adjusts how many rows the SELECT box will display on the form.

Here is a sample code for a SELECT list box:

<SELECT NAME="How Do You Rate My Web Site" SIZE="1">
<OPTION>Excellent
<OPTION>Great
<OPTION>Good
<OPTION>Poor
</SELECT>

Let's take a look at what that will produce: (SIZE="1" will produce a "dropdown" list box).

Excellent Great Good Poor

This is SIZE="2" (a "scrolling" list box).

Excellent Great Good Poor

This is SIZE="4" (a "scrolling" list box).

Excellent Great Good Poor

You can also "preselect" an item in the list box. This will work no matter what SIZE you choose to use. Here is a sample code for a SELECT list box with one of the items already preselected.

<SELECT NAME="How Do You Rate My Web Site" SIZE="1">
<OPTION>Excellent
<OPTION SELECTED>Great
<OPTION>Good
<OPTION>Poor
</SELECT>

Let's take a look at what that will produce:

Excellent Great Good Poor

When the form calls for a PASSWORD to be typed in, you would use a PASSWORD INPUT TYPE to do this. This text box will not display your text, it will display an asterisk * in place of each letter typed in.

Here is a sample code for a PASSWORD text box:

<INPUT TYPE="password" NAME="your password" SIZE="9" MAXLENGTH="9">

Let's take a look at what that will produce: (Type in the box and see the asterisks).

Note: if you use a VALUE in the PASSWORD INPUT the letters in the box will be displayed as asterisks but the user can always look at the Html code to view the VALUE you have given it. This is not a good idea.

You may use an IMAGE as your "Submit" button. Add "alt" text as you would with any image in case for some reason your image is not displayed on the users browser.

<INPUT TYPE="image" ALT="Submit" SRC="http://www.draac.com/go-button.gif">

Let's take a look at what that will produce: (I will include a text box to the left of the image to make it look more like a form here in the example).

You can add a RESET button to your form. When clicked all the typed in data in the form will be cleared, returning the form to it's original state.
You can add text on this button with a VALUE. If no VALUE is assigned it will display "Reset" by default.

Here is a sample code for a RESET button:

<INPUT TYPE="reset" VALUE="Clear This Form">

Let's take a look at what that will produce:

That is the course on how to build a form. Give one a try, add as many or as few fields as you would like. Format your form using basic html to make it look eye appealing to the user. To have better control over where things are placed in your form, try setting your form into Tables.