Lesson 9 - Constructing a Form Page

Most Web pages are designed to communicate information in one direction only - from the server to the browser. This fulfills the needs of most visitors that are looking for information. However, there are times when you need to collect information from the visitor and HTML provides the tools you need via the suite of form elements.

HTML provides the form element as a container for various types of elements, most of which allow the user to provide input or to select an option from a list of available options. We then can either use JavaScript on the client side to process this information or we can send it to a server to be processed by some script or program that resides on the server.

1. Form
2. Text Box
3. Password
4. Text Area
5. Radio Button
6. Select
7. Check Box
8. Submit Button
9. Reset Button
10. Hidden
11. Button (<input type="button">)
12. Button (<button>)
13. Image
14. File
15. Lab Assignment

    1. Form

The Form element is a container for several types of controls. The types of controls supported by HTML include:

• buttons
• checkboxes
• radio buttons
• list
• text input
• file select
• hidden controls
• objects

A FORM element is delimited by a beginning <FORM> tag and an ending </FORM> tag. The most commonly used attributes are the action= and the method= attributes. It also has two frequently used event handlers which are onsubmit= and onreset=.

You can also send the form to an e-mail address which means the form data will be sent as an attachment of an e-mail message to the designated address. However, this is a little inelegant because in Internet Explorer the user receives a warning message that pops up telling them what is about to happen and warning them of the security risks.

Format

actionURL specifies the URL that will be used to process the form. This will normally point to a .cgi, .asp, .php, or other type of file that executes a script or program that can parse the form data and work with it.

method tells the browser which of two possible HTTP methods of transmitting data should be used.

formName is the name assigned to the form. This is a convenience in order to be able to use dot notation to reference form elements by name when there is more than one form on a page.

• method="POST" tells the browser to send the form data in the body of the HTTP request. This is the preferred method of sending data when you either have a lot of data to send or you have special data or character sets to send.
• method="GET" tells the browser to send the data by appending it to the URL specified by the action attribute (separated by a question-mark). This method is used for a short amount of data that doesn't need to be hidden from the user. This information will also appear in the browser address box. There is usually a limit to the amount of data that can be sent using the GET method. Also, the GET method restricts form data to ASCII characters. However, if you can work with these limitations then this is the more efficient way of transmitting information.

Examples

The following shows the script for submitting a form to a CGI program named formdump.cgi. This program expects the form data to be transmitted using HTTP-POST.

The following shows the script for submitting the contents of a form to a user as an attachment to an e-mail. method="POST" is required

    2. Text Box

Text fields are the most commonly used form element to collect information. They are used to define an area where information can be keyed into.

All form content elements, i.e. text boxes, radio buttons, etc., are passed to the server program as "name=value" pairs. The name is the name assigned to the content element and the value is the information the visitor enters into the element.

Format

fieldName is the name of the field that will be passed to the server program.

defaultValue if the user doesn't enter any information into the field, the value entered here will be passed to the server program instead. This field is optional.

fieldWidth is the width of the text box field.

maximumCharacters this is the maximum number of characters that the visitor can enter into the field.

Example

Remember your table tags. The following code segment ...

... produces the following results. Type the alphabet into it (ABCDEFGHIJKLMNOP) and notice that you are blocked when you try to enter the "P" because it is character number 16. Note also that even though the size is set to 10 the 10 is approximate. You may or may not be able to enter a full 10 characters before the text starts scrolling to the left.

The <col> tags are the easiest way to align the field labels and the form fields.

Curious about the JavaScript to validate a field?

The following script will validate that the field is numeric (assuming the text field is used to enter how old you are) It is placed in between the <head> and the </head> tags.

Next you change the <form> tag to include the "onSubmit=" event capture property as follows:

    3. Password Fields

Password fields are similar to text fields except that the characters are replaced by asterisks (*) as the visitor types each character. Because the asterisk is a small character the size of the field doesn't need to be as large in order to hold the same number of characters as a text field.

Keep in mind that the password is masked from viewers. However, the information is not encrypted when it is transmitted to the server. You must encrypt the data using either JavaScript or using connecting to a server using an encryption technique such as SSL (Secured Socket Layer).

Also, when specifying a new password or changing an existing password, it is a good practice since the visitor can't see what they are typing to place the password field in the form twice and to validate, via JavaScript, that the same password was type in both fields. This helps reduce typing errors by the visitor.

Format

fieldName is the name of the field that will be passed to the server program.

defaultValue if the user doesn't enter any information into the field, the value entered here will be passed to the server program instead. This field is optional.

fieldWidth is the width of the text box field.

maximumCharacters this is the maximum number of characters that the visitor can enter into the field.

Example

Curious about the JavaScript to validate a password?

The following script is placed in between the <head> and the </head> tags.

Next you change the <form> tag to include the "onSubmit=" event capture property as follows:

Now we haven't covered JavaScript in sufficient detail to understand all of what is going on here but you can notice the following

The password field is named "password" and the second password fields is named "duppass" (line 4).

• If the passwords don't match (line 4) then the "validateForm()" function returns the value false to the form (line 6).
• By returning the results of the validateForm() function (which is false) to the form (as shown in the <form> tag) the request to submit the form to the server is canceled which gives the visitor the opportunity to correct their error.

    4. Text Area

The Text Area element behaves similarly to a text box except that it permits multiple lines of text to be entered. It is usually used for descriptive or narrative like information such as "Describe the problem."

Format

fieldName is the name of the field that will be passed to the server program.

numberRows is the number of the rows that are allocated for the text area.

width is the width of the text area.

wrap=off will cause a horizontal scroll bar to automatically appear if the text entered on any individual line exceeds the width of the text area.

wrap=virtual or wrap=physical will cause automatic line wrap if the text entered on any individual line exceeds the width of the text area. The wrap parameter is non-standard HTML and the default value if the wrap property is left off is that wrapping will take place.

Example

The following segment of code demonstrates how a row in a table can be set up for the Text Area element.

The above code segment results in the following form presentation.

    5. Radio Button Elements

This is a different type of field and operates similar to the check box fields except that you can only select one of a set of radio buttons but you can select 0 to many check boxes.

Format

fieldName is the name of the field that will be passed to the server program. All radio buttons that are in the same group, i.e. only one of the buttons can be selected at a time, MUST have the same name.

returnedValue is the value that will be returned to the server if this option is selected. It is required.

checked is a keyword that indicates that this radio button will be preselected. Only one radio button of a group should be "checked".

You need to provide one input field of type radio for each option that can be provided. In the case of our Gender field you only have male or female (transvestites don't count) so you will need one input field for Male and one input field for Female. The trick is that all of the radio buttons for a group MUST have the same name.

Example

The following segment of code demonstrates how a row in a table can be set up.

The above code segment results in the following form presentation.

    6. Select Element

The select element allows the visitor to select either one item from a list or multiple items from a list. Like the radio and check box fields, a unique value is associated with each of the available options in the list.

Format

fieldName is the name of the field that will be passed to the server program.

nbrOptionsDisplayed is the number of the items from the list that are displayed at the same time. This is only valid if the keyword multiple is also selected.

multiple indicates that more than one item can be selected from the list.

optionValue this is the unique identifier that the server can use to determine which option from this list was selected.

selected is added to the option that you want the default selection to be should the user NOT reselect anything.

You should have two or more options to select from and all of the option tags should be enclosed between the <select> tag and the </select> tag.

Example

The following segment of code demonstrates how a row in a table can be set up for the select element. Note that the great state of Texas is preselected.

The above code segment results in the following form presentation.

    7. Check Box Element

The Check Box element operates similar to the radio button except that you can select as many options of a group as you wish whereas with radio buttons you can select only one option of a group.

You would use a check box under two conditions. The first is where you need a simple yes/no type answer to a question. This cannot be done with radio buttons. The second is where you want to be able to select more than one option from a list of options. Radio buttons only allow you to select one option from a list of options.

Format

fieldName is the name of the field that will be passed to the server program.

returnedValue is the value that will be returned to the server if this option is selected. It is required.

checked is a keyword that indicates that this checkbox will be preselected.

You need to provide one input field of type checkbox for each option that can be provided. In the case of our Gender field you only have male or female (transvestites don't count) so you will need one input field for Male and one input field for Female. The trick is that all of the radio buttons for a group MUST have the same name.

Example

The following segment of code demonstrates how a row in a table can be set up.

The above code segment results in the following form presentation.

    8. Submit Button

The Submit button's default behavior is to submit the form to the URL defined by the action= attribute of the form.

Format

buttonName is the name associated with the button. If left blank the name defaults to "submit".

buttonValue is the text that will be passed to the browser. More importantly it is the text that will be the label for the button. If left blank then it defaults to "Submit Query".

Examples

The minimum required for a Submit button. Note the default label used for the button.

The following might be used to create a button that begins a search when it is clicked. Note that I gave it both a name and a value.

    9. Reset Button

The Reset button's default behavior is to clear the form fields. It does NOT reload the form. This is a convenience to the user if they need to start over. The flip side is that it can be REAL frustrating to have accidently clicked the reset button on a large form when you really meant to click the submit button.

Consider adding a "Are you sure you want to clear the fields?" prompt message.

Format

buttonName is the name associated with the button. If left blank the name defaults to "reset".

buttonValue is the text that will be passed to the browser. More importantly it is the text that will be the label for the button. If left blank then it defaults to "Reset".

Examples

The minimum required for a Reset button. Note the default label used for the button.

If you don't like the word "Reset" you can expand on it with the following.

    10. Hidden Element

Hidden form fields are non-visible containers. The only thing that is required is that they have a name so that they can be referenced by the script or programs that process the form.

Hidden form fields are most useful when the server application is trying to remember session information from one page to another. For example the server may want to store the user's user id in a hidden form field when the page is sent to the user's browser. When the user resends the page back to the server then the server knows the user id of the person without having to ask the user for their user id a second time.

Example

The hidden form field is between the greater than and less than symbols. >< You'll just have to trust me.

    11. Button Element(<input type="button">)

Use this for buttons that are NOT intended to submit anything to a server. To get this button to do anything useful you must use some scripting language called by the button element's onclick= event handler.

Format

buttonName is the name associated with the button. If left blank it defaults to "button".

buttonValue is the text that will be passed to the browser. More importantly it is the text that will be the label for the button.

Examples

The minimum required for a "Button" button. Note the default label used for the button. That's right - there is none. So the default look is simply an empty button.

Add the value attribute gives the button a label just like the submit and reset buttons.

    12. Button Element (<button>)

The behavior of this button is exactly the same as the <input type="button">. However, this variation allows you to combine text with a button image. You also need to be aware that this tag is new enough that it may be risky to use it. It won't be supported by a lot of browsers.

Format

buttonType will be "submit" if this button should behave like an <input type="submit"> button, "reset" if this button should behave like an <input type="reset"> button, or simply "button" if this button should behave like an <input type="button"> button.

buttonName is the name associated with the button.

buttonValue is the text that will be passed to the browser. More importantly it is the text that will be the label for the button. If left blank then it defaults to "Reset".

Examples

The following is a plain button using the Button element.

Do marvelous things!

The following employs an image for the button.

The following combines an image AND text to create the button.

World Domination!

    13. Image Element

And FINALLY one more button. This button is similar in behavior and definition to the <input type="button"> button. The difference is that instead of a square button it allows you to specify the source for the button.

Format

buttonName is the name associated with the button. If left blank it defaults to "image".

buttonValue is the text that will be passed to the browser.

Examples

The minimum required for an Image button.

    14. File Element

The File element is a way for the user to send a text or image file to the server for processing. This is a fairly complex form element that involves a little more knowledge that simple JavaScript. I'll leave an example here to show you what it looks like on the form but we won't go into detail on this element.

Example

You can click on the browse button to search and select a file that you wish to transfer to the server. The name of the file appears in the input box but when the form is submitted the browser will read the contents of the file and append it to the HTTP request as subsequent part of a multipart form HTTP request.

The server program will then need to be smart enough to separate the parts and save the file in a temporary area so that the server program can do what it needs to do with it. (Usually move it to another location.)

    15. Lab Assignment

In preparation this lab you should already have read chapter 10 in the HTML for the WWW class book. I will walk you through the steps of creating a form that will actually interact with a program on the server that will feed back to you the information that you enter into the form fields.

Step 1 - Defining the Form

The form we will design is a simple user profile. It will ask for the following information:

• User Name, accepts up to 50 characters
• User Id, accepts up to 30 characters
• Password, accepts up to 50 characters (characters should not be legible)
• Re-enter password to verify, accepts up to 50 characters (characters should not be legible)
• e-Mail address, accepts up to 100 characters
• Age, accepts a number up to 3 digits
• Gender, radio button with two options
• State of Residence, drop down box providing a list of valid states (at least five states listed)
• Additional Comments, Multi-line Text box with space for four lines of information, 100 characters in width

Now, to organize labels and form fields I want you to create a table. What we will do is create a table that has two columns. The left column will contain the field labels and the right column will contain the form fields. The labels in the table should be "right-aligned" and the form fields should be "left-aligned". This type of form layout creates a nicely organized form that the visitor can easily read and understand.

The "action" to take when the user clicks the submit button should be "http://www.vvm.com/~stevei/cgi-bin/formdump.cgi". This will read your form and return the results to you. It will return the "Raw Form Data" which is the information that is sent to the program. It also parses the data and returns a name-value pair. And finally it returns additional information that can be checked for in a CGI program.

The "method" to use for the form is "post".

The following link displays the form that you should build on your own using HTML Tool.