Working with HTML Forms

 

Introduction.  Now we get to one of the most important ways to interact with users.  I will do a little survey of HTML form syntax.  Then we will work an example.

The following table contains a quick survey of the major form controls.  It doesn't say much about the large variety of other options that can be set within each tag.

 

 

Control Type

Syntax

Description
Text Box

<INPUT  TYPE=TEXT  NAME=____>

 Use when you want the user to enter a string of characters or a number.  You can also set the size of the box among many other things.

This can also be type="password" if you want it to not display what the user types as they type it.
Text Area <TEXTAREA  NAME=____></TEXTAREA> Use when you want the user to enter a longer string of characters such as a message.

You can also set the column width and row height.
Select Box <SELECT  NAME=____ >
             <OPTION  VALUE="      ">
             <OPTION  VALUE="      ">
           ...
             <OPTION  VALUE="      ">
</SELECT>                        		Use when you want to restrict the user to selecting an item in a set of acceptable answers.  Each option in the List box is determined by the <OPTION> tag.  You can also influence how many elements appear on the form before the user selects the control.  Even though there may be ten items in the list, it can appear either as a combo box with one item showing or a list box with all ten items showing.
Check Box <INPUT  TYPE=CHECKBOX  NAME=____   > Use anytime you have one or more binary options that can be mixed and matched.  If they are in a related group presume that more than one can still be checked.  You can set up a default value with a CHECKED entry at the end in the tag..
Radio Buttons <INPUT  TYPE=RADIO  NAME=____  VALUE=____ > Use when you have a set of options that are mutually exclusive.  That is, only none or one of the options can be selected.  All radio buttons with the same NAME are in the grouping.  The VALUE is used to identify each button in the group.
Submit Button <INPUT TYPE=SUBMIT> This puts a command button on the form that the user should press to submit the form for processing.  This will send the information gathered from the user to somePage.asp.

 

 

These will be illustrated in the following webpage.

While the following example is quite artificial I am working it this way to make certain we have a script that makes use of all of these form controls.