Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | Lessons | previous | next |

28a. Forming Forms

This would be so much better worse no different if only we were able to use forms to add interactivity to make me look cool to enliven every page, plus it would really knock the off of everybody at the when they and see the wonderful things that can happen by clicking, selecting, and typing in fields, and more clicking!

Objectives

After this lesson you will be able to:

Write the HTML for the basic web form elements
- text fields
- password fields
- text area fields
- radio buttons
- checkboxes
- menu selections
- buttons

Lesson

Note: If you do not have the working documents from the previous lessons, download a copy now.

In this lesson we will introduce the basic web form elements that you might use in your pages. They will not actually do anything until the next lesson.

A web page form is defined by a set of <form>....</form> tags where everything in between includes HTML to code the different text fields, buttons, and drop down menus that are used to store selections from the page viewer. You can also have other HTML code inside the form that serve as labels for your form elements.

As an example, look at the source HTML used for the Writing HTML Alumni page. This page includes several different form elements for inputting text. The page layout is defined by using tables to arrange the form elements. The HTML on that page form includes different input elements that as well as the table tags that define their layout.

The bare bones format for writing a form is:

  <form action="[url for server program]" method="GET/POST">
    :
    :
    (form elements)
     :
 </form>

We will talk more in the next lesson about the meaning of the options in the <FORM> tag. For now think of the value for ACTION=... as something that tells the browser the location of a script or program that will process the data sent by the browser via the selections in the form. The two values for METHOD=..., POST or GET define one of two ways the data from the form is sent to the program that will process the data.

Now we will review the different form elements you can use. All of the elements inside the <FORM> tags can send some information about their contents and whether or not they have been activated by the web page viewer. Each element includes a defined "type" plus a unique indentifying name for that element. When the form data is sent to the web server, each element sends its name and its current state or value.

Text Input Elements (`type="text"`)

... are used to create one line fields that viewers can type text. The default width is 20 characters, and you can create fields of other sizes by the value in the size option. You can limit the number of characters by the value of the MAXLENGTH option. Text input fields will be empty when the page loads, unless you provide an initial text string for its VALUE option.

A text field named "text1" that is 30 characters wide.
<input type="text" name="text1" size="30">

A text field named "text2" that is 30 characters wide but will only accept 20 characters.
<input type="text" name="text2" size="30" maxlength="20">

A text field named "text3" that is 40 characters wide with default value.
<input type="text" name="text3" size="40" value="We are not alone">

Password Input Elements (`type="password"`)

... are exactly the same as text input elements, except that when the viewer types in, they see "bullet" characters rather then the letter they are typing. Password text is scrambled during transmission and then unscramble when the form data is received at the server end. See the difference between typing in the fields below and the ones in the previous section.

A password field named "pass1" that is 30 characters wide.
<input type="password" name="pass1" size="30">

A password field named "pass2" that is 30 characters wide but will only accept 20 characters.
<input type="password" name="pass2" size="30" maxlength="20">

A password field named "pass3" that is 40 characters wide with default value.
<input type="password" name="pass3" size="40" value="We are not alone">

Text Area Input Elements (`type="textarea"`)

... are text fields that have more than one line and can scroll as the viewer enters more text. The tag options define the size of the field by the number of rows and character columns. By adding the option WRAP=VIRTUAL, the text entered will automatically wrap at the right hand side of the field. You can also include default text to appear in the field.

A textarea field named "comments" that is 45 characters wide and 6 lines high.
<textarea name="comments" rows="6" cols="45" wrap="virtual"> The first time I ever saw a web page, I thought.... (continue) </textarea> The first time I ever saw a web page, I thought.... (continue)

Radio buttons (`type="radio"`)

... are sets of buttons that are linked so that only one among button in each sets is selected at a time; if you click one button, the others in the set are automatically de-selected. A set of radio buttons is defined by providing them the same name. The value sent in the web form is the value of the radio button that was last selected. Adding the option CHECKED to one of the buttons in a set will make that button highlighted when the page loads.

4 radio buttons with default selection
<input type="radio" name="food" value="hotdogs" checked> hotdogs are my favorite food<br> <input type="radio" name="food" value="hamburgers"> i like hamburgers<br> <input type="radio" name="food" value="steak"> steak is tasty<br> <input type="radio" name="food" value="beans"> beans are for veggie-lovers<br>

hotdogs are my favorite food
i like hamburgers
steak is tasty
beans are for veggie-lovers

3 radio buttons with no default selection
<input type="radio" name="spread" value="ketsup"> ketsup<br> <input type="radio" name="spread" value="mustard"> mustard<br> <input type="radio" name="spread" value="mayo"> mayonnaise<br> ketsup
mustard
mayonnaise

NOTE: See how the two sets of radio buttons, one named "food" and the other named "spread" operate independently from each other.

Check Boxes (`type="checkbox"`)

...are similar to radio buttons, but are not affected by other buttons, so you can have more than one in a group checked at a time. Note that every checkbox has a unique name. If there is no check in the box, clicking it will place an X or a check mark there. If the box is checked, clicking it again will remove the mark. The value sent in the web form is the value of the checkbox if it was selected; otherwise the value will be empty. Adding the option CHECKED to one of the buttons in a set will make that button highlighted when the page loads.

4 check boxes with default selections
<input type="checkbox" name="food1" value="hotdogs" checked> hotdogs are my favorite food<br> <input type="checkbox" name="food2" value="hamburgers"> i like hamburgers<br> <input type="checkbox" name="food3" value="steak" checked> steak is tasty<br> <input type="checkbox" name="food4" value="beans"> beans are for veggie-lovers<br>

hotdogs are my favorite food
i like hamburgers
steak is tasty
beans are for veggie-lovers

3 check boxes with no default selection
<input type="checkbox" name="spread1" value="ketsup"> ketsup<br> <input type="checkbox" name="spread2" value="mustard"> mustard<br> <input type="checkbox" name="spread3" value="mayo"> mayonnaise<br> ketsup
mustard
mayonnaise

Menu Select (`type="select"`)

... provides drop-down menus that allow the viewer to choose one from a list of choices. The <OPTION>...</OPTION> tag defines the text that is displayed in the menu. The value of the option last selected is returned when the form data is transmitted. Adding the CHECKED option indicates which element is selected initially when the page loads; if this is not provided, the first item is checked by default.

A four item select menu with the third item selected initially
<select name="cheeses"> <option value="colby"> Colby from Ohio</option> <option value="sharp"> Sharp Cheddar from Oregon</option> <option value="swiss" selected> Holy Cheese from Switzerland</option> <option value="longhorn" > English Longhorn</option> </select>

Submit and Reset (`type="submit"` and `type="reset"`)

... creates buttons on the form. The Submit button tells the web browser to gather up all the selections, values, and entered text in the form elements and send it off to the place defined in the ACTION part of the form tag. The Reset button restores the form to its default state, how it looked when the viewer first entered the page. The VALUE option defines the text string that is placed on these buttons.

Submit button
<input type="submit" value="Send this form data now!">

Reset button
<input type="reset" value="Clear the web form">

NOTE: For this lesson we have created a simple JavaScript alert message to appear when you try the Submit button. If you had entered any text, or changed any button.menu selection, the Reset button above will revert them all to their initial state.

We will now create a web page form that uses all of these elements. This is going to be an additional feature of our Volcano Web project portion. The purpose of the form is to provide a place for people who are doing their projects to submit their reports. We could use this in several ways; it could send the reports as email to the instructor, it could write the report data to a file on the web server, or it could generate a formatted web page report for the student which they could then print. There are other things we could do with data sent by a web form and this is but one example.

Hopefully now you will see an advantage of using the frames display we created for this area in lesson 26. We will create one new web page that will display the form in the main display area and we will modify the left side frame that contains the menu of choices to add a link for our new page.

Open the proj_menu.html file in your text editor.

After the HTML code that contains the link information for the "Reference" frames web page, add:

<A HREF="proj_report.html">
<font size=+2 face="arial,helvetica">R</font>EPORT...</A><br>
a form to submit your report

Save this HTMl file.
Now we will begin building the new web page that will contain the form. Create a new file in your text editor and save it as a file named proj_report.html stored in the same directory/folder as your other HTML documents.
To better learn the parts of this document, we will present it one section at a time. The first part of the file contains the "normal" part of our HTML file. Add this to your new file:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head></head>
<BODY BGCOLOR=#FFFFCC TEXT=#333333 LINK="#0000CC" VLINK=#FF6666>
<h2 align=center>Report Form</h2>
```
Now enter the code to mark the beginning of the form. Until the next lesson when we learn how to make it actually do something, we will not be writing the ACTION=... part.
```
<form method="post">
```
The report form will be displayed using HTML tables, which are useful for web forms because they allow us to align the text labels and the form elements. We will create a table that has 4 major parts of our form:
1. Student Information: information about the person filling in the form
2. Volcano report: A summary of the information they are presenting
3. Sources: A place for students to provide the web site resources they used
4. Submit and Clear: The buttons to click to either send or reset the form
Each of these sections will be marked by a large table cell that defines that section of our form. Add this content to start the table and to write the first section for "Student Information":
```
<table border=0 cellpadding=4 cellspacing=1>
<tr>
<td colspan=2 bgcolor="#003333"><font size=+3 color=#CCCCCC>
<tt><b>student information</b></font></td>
</tr>
<tr>
<td valign=top align=right><tt><b>name</b></td>
<td valign=top><input type="text" name="name" size="40"><br>
<font size=2 color=#000099>enter your full name</font>
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>email</b></td>
<td valign=top><input type="text" name="email" size="40"><br>
<font size=2 color=#000099>enter an internet contact address</font> 
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>password</b></td>
<td valign=top><input type="password" name="pass" size="20"><br>
<font size=2 color=#000099>enter a code to identify you to your instructor</font> 
</td>
</tr>
```
NOTE: We have created a 2 column cell for the text "student information" followed by three table rows that contain text input form fields. We have put the labels for the field in the first column of each row, right aligned. We also provide brief instructions in small, blue text below each form element.

Note how each form element has a unique name. The third form field is actually a password type to shield the code name the user will type in.

Now we will write the second section where the person using this web form will provide their volcano report-- this one uses text input, menu selections, radio buttons, and checkboxes:

<tr>
<td valign=top align=right><tt><b>volcano name</b></td>
<td valign=top><input type="text" name="vname" size="40"><br>
<font size=2 color=#000099>enter the name of the volcano you researched</font>
</td>
</tr>
<tr>
<td valign=top align=right><tt><b>location</b></td>
<td valign=top><input type="text" name="vlat" size="10"> latitude<br>
<input type="text" name="vlong" size="10"> longitude<br>
<font size=2 color=#000099>enter the map coordinates that locate this volcano</font>
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>type</b></td>
<td valign=top>
<select name="vtype">
<option value="select" selected>Select the type...</option>
<option value="Hawaiian">Hawaiian</option>
<option value="Surtseyan">Surtseyan</option>
<option value="Strombolian">Strombolian</option>
<option value="Phreato-Plinian">Phreato-Plinian</option>
<option value="Plinian">Plinian</option>
</select><br>
<font size=2 color=#000099>select the volcano type 
(see <a href="term.html" target="_top">volcano terminology</a>)</font>
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>activity</b></td>
<td valign=top>
<input type="radio" name="active" value="active" checked> active
<input type="radio" name="active" value="inactive"> inactive<br>
<input type="text" name="vdate" size="40"><br>
<font size=2 color=#000099>enter the date of last known eruption, if known</font>
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>features</b></td>
<td valign=top>
<input type="checkbox" name="note1" value="danger risk">danger risk to nearby population<br>
<input type="checkbox" name="note2" value="historic eruptions">has erupted in historic time<br>
<input type="checkbox" name="note3" value="observed">has been observed in detail<br>
<input type="checkbox" name="note4" value="explosive eruptions">explosive eruptions<br>
<input type="checkbox" name="note5" value="mild eruptions">mild eruptions<br>
<font size=2 color=#000099>check all that apply</font>
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>more info</b></td>
<td valign=top><textarea name="info" rows="12" cols="40" wrap=virtual>
</textarea><br>
<font size=2 color=#000099>write any other information 
that you have learned about this volcano</font>
</td>
</tr>

NOTE: Be sure to compare the format of radio buttons versus check boxes; each radio button in a set has the same name while all of the check boxes have different names.

The third section of the web page form is used for providing resources used in the report through provides three field input fields. Since the data entered will be web site addresses, we can provide an initial VALUE of "http://" for the text input tags:


<tr>
<td colspan=2 bgcolor="#003333"><font size=+3 color=#CCCCCC>
<tt><b>sources</b></font></td>
</tr>

<tr>
<td valign=top align=right><tt><b>references</b></td>
<td valign=top><input type="text" name="ref1" size="40" value="http://"><br>
<input type="text" name="ref2" size="40" value="http://"><br>
<input type="text" name="ref3" size="40" value="http://"><br>
<font size=2 color=#000099>provide three web site URLs that you used in your research</font>
</td>
</tr>

The final section of our table/form contains the buttons that will submit the report content in the form and another button that can be used to reset the form to is initial, empty state. It also ends the table, the form, and the rest of the HTML document.

<tr>
<td colspan=2 bgcolor="#003333"><font size=+3 color=#CCCCCC>
<tt><b>send report</b></font></td>
</tr>

<tr>
<td valign=top align=right> </td>
<td valign=top>
<input type="submit" value="Send in My Report">  
<input type="reset" value="Erase Report Form">
</td>
</table>
</form>

</body>
</html>

Save and Load the proj.html document in your web browser. The left side of this framed web page should now have a link that you added in step 2 above, that loads the web page form you created in the following steps. The form will not do anything yet, but the buttons, menus, and fields should all be editable.

Check Your Work

Compare your web pages with this sample of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor.

Review

Review topics for this lesson:

What is the structure of a web page form?
What are the differences in function and HTML coding for radio buttons and check boxes?
How do you create a drop down menu in a web page?
What are the differences between Submit and Reset form buttons?

Independent Practice

Experiment with writing web page form elements to your own web pages. How would you create a web page that has more than one form on it?

Coming Next....

Let's make that web page form do something!

GO TO.... | Lesson Index | previous: "Forms: Intro" | next: "Form Action with email and CGI" |

Writing HTML: Lesson 28a: Forming Forms
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

The 'net connection at MCLI is Alan Levine
Comments to alan.levine@domail.maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut28a.html

Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | Lessons | previous | next |

28a. Forming Forms

Objectives

Lesson

Text Input Elements (type="text")

Password Input Elements (type="password")

Text Area Input Elements (type="textarea")

Radio buttons (type="radio")

Check Boxes (type="checkbox")

Menu Select (type="select")

Submit and Reset (type="submit" and type="reset")