Forms

Form introduction

Forms are widely used to allow the user to input data.
This is a very important capability in some web pages.

The user can type into an input area or click to provide informtion.
The elements, where the user can enter information, are sometimes called controls.

Examples:
You filled out a form with personal data when you registered at De Anza.
You fill out a form when you order a book on-line, giving your shipping address and credit card number.

This data can be sent across the Internet to the web server, where it is processed.
It is also possible to do some processing within the user's browser, by using the JavaScript programming language.
Often the processing is a combination of JavaScript processing in the user's browser, then additional processing in the web server.

In this course, we will build forms and form controls.
Processing the data is not covered in this course.

Elements in a form

Within the  form  element, the following elements can be used to create a control, where the user can provide input:

  • input    - Allows various types of user input.
  • select   - Allows the user to select from a list of possiblilities.
  • textarea - Allows the user to enter multiple lines of text.
  • button   - Allows the user to click, to requist an action.

name attribute

Within the a form, each control element must have a name attribute.
The name attribute values must be unique, except for radio buttons.
All radio buttons in the same set must have the same name.

Form element

The form element usually contains all the controls. If a control is not in a form, it cannot be processed by a submit or reset button. A submit button sends everything in the form to the web server, to be processed.

We will NOT be sending forms to a web server and processing the forms in this course. If we were really sending the forms to a web server, there are two very important attributes:

  • method - Specifies how the data is sent to the server.
  • action - Specifies the server program to process our form.

The method attribute must be method="get" or method="post". Usually method="post" is used.

The action attribute should specify the web server and its form processing program. For example:
action="http://www.example.com/cgi-bin/process-order.pl"
Where www.example.com is the web server domain name, cgi-bin is the directory containing the program, and process-order.pl is the name of the program which will process our form.

form example:
  <form method="post" action="http://www.example.com/cgi-bin/process-order.pl">
      Put the control elements here
  </form>

Input element

type of an input elements

The type of an  input  element is specified with the  type  attrubute in the  input  element. The following are values for the types of input:

  • text     - Allows one line of text.
  • password - Allows one password.
  • checkbox - Provides one box, which can be checked.
  • radio    - Provides one radio button, which can be checked.
  • button   - Provides one button.
  • submit   - Provides one submit button.
  • reset    - Provides one reset button.

There are also two additional types of input controls:
file and hidden.

The type of a  button  element is specified with the  type  attrubute in the  button  element. The following are values for the types of buttons:

  • button   - Same as an input button.
  • submit   - Same as an input submit button.
  • reset    - Same as an input reset button.

We will look at the attributes of a  select  element, and the attributes of a  textarea  element, as we look at these controls.

input element with type="text"

An input element with type="text" will provide a text input control, which allows the user to type one line of text.
This type of input element should usually have the following attributes:
name      - some name that is unique within the form
size      - the number of characters shown in the input field.
maxlength - the maximum number of characters, which will scroll if larger than the size.
Example:
  <input type="text" name="phone" size="14" maxlength="30" />

input element with type="password"

An input element with type="password" is exactly like type="text", except it shows *** on the screen when the user types. This prevents someone from reading over the user's shoulder, but provides no other protection.
Example:
  <input type="password" name="pwd" size="12" maxlength="12" />

input element with type="checkbox"

An input element with type="checkbox" provides a check box, which the user can click.
This type of input element should usually have the following attributes:
name  - some name that is unique within the form
value - the value sent if the box is checked.
You may also wish to have the box initially checked, by specifying the attribute and value:
checked="checked"
Example:
  <input type="checkbox" name="wrapping" value="gift-Wrap" />

input element with type="radio"

An input element with type="radio" provides a radio button, which the user can click.
Several radio buttons are used in a set of radio buttons that work together.
Only one radio button is selected within a set of radio buttons; if you select a new radio button, the one that was previously selected is automatically unselected.

This type of input element should usually have the following attributes:
name  - the name must be the same for all radio buttons in the set.
value - the value must be unique within the set of radio buttons.
Every radio button in a set must have the same name.
Every radio button in a set must have a different value.
You may also wish to have ONE radio button initially checked, by specifying the attribute and value:
checked="checked"
Example:
  <input type="radio" name="size" value="3T" />
  <input type="radio" name="size" value="4T" />
  <input type="radio" name="size" value="5T" checked="checked" />

Text area element

Purpose of a text area

A  textarea  element is used with rows and cols attributes, to provide a multi-line text area.

textarea element required attrubutes

A textarea should have the following attributes:
name - some name that is unique within the form
rows - the number of rows in the text area.
cols - the number of characters in each row.
Any default text should be within the textarea container element.
Example:
  <textarea name="shipping" rows="6" cols="30">
    Enter shipping instructions here
  </textarea>
There are few places where extra space has an effect in html. The textarea element is an exception. Any space you put in the textarea element will show up as space before the initial position of the cursor.
To avoid this problem put the closing textarea tag immediatly after the opening textarea tag, with no space between them.

Lab 10

Now you are ready to build your lab 10 web page.
Follow the link on the left to read the lab 10 requirements and build your lab 10 web pages.

Complete Lab 10

You have built your lab 10 web page.
Upload your page to voyager, just as you did for lab 2.
Validate your lab 10 page.
Then, log in to Catalyst and submit assignment 10. The submission should provide the following information:

  • It should say that you have completed Lab 10.

Vacation project subject

Next week we will begin using a new final project topic. You may now send an e-mail to your instructor requesting approval for your selection. In the e-mail, select a vacation destination, that is NOT in the state or country you have been using for your lab topic. ( You may include second and third choices, in case your first choice is not available. ) ( If you choose Hawaii, please choose one of the islands. )

Reading assignment

Reading assignments are in HTML, A Beginner's Guide, by Wendy Willard.
Read the chapter.

Chapter 11
(Note that we skipped chapter 10. Frames were never to widely used. Other techniques are used now.)

Understand the Concept and Uses of Forms in Web Pages
Read.
Create a Basic Form
Read.
Provide a Way for Your Form to be Processed
Scan this section. We will not be writing scripts to process the form on the web server.
Use Additional Formatting Techniques for Forms
Read.
Style Forms
Read the first part of this section, about using a table to lay out a form. Omit the section Use Styles and fieldsets to eleminate the table layout.
It is difficult to get styles to work like a table for formatting a page. Try it if you wish, but use a table in the lab assignment.

We are NOT studying Forms Processing in this course, only building the form page.
Form processing may be done using JavaScript on our client machine, and a programming language on the host server.

An alternate text is Even More Excellent HTML by Timothy T. Gottleber and Timothy N. Trainor. This book gives both new and older techniques. You may read in this book, if you wish. Look at chapter 11, "Forms and forms processing"