HTML 7

Forms

When you go into a doctor's office for the first time they hand you a form. Forms are an efficient method of gathering information.

Forms supply information that the form-taker wants. They don't just hand you a blank page and hope you type what they want.

On web sites, often you need forms. This enables you to collect data that you need.

The areas on a form are called fields or text fields. There are one-line fields and multiple line fields. Fields hold information that your users enter. In programming terminology such fields are know as text boxes. In a text box users can enter numbers, dates, and any kind of information.

In addition to fields many forms have command buttons that are also called buttons. Reset and send buttons are common examples.

By clicking the button, the users can clear all the fields or can send the information to you. All theses form elements are called collectively controls. You can also use check boxes, radio button and list boxes.

NOTE: Never put text "click me" of "click here" on a button. Assume the user is smart enough to know they can click.

CGI

Common Gateway Interface is one of the languages of commercial web sites because of the information those sites collect. But you don't have to run a business site to have forms.

CGI script runs on the server with your web page and determines where the form information goes.

Some usual targets are:

Database located on your web site

A non-database file like a simple text file located on the server to your email

The goal obviously is to get the information back to you from the web server.

Creating forms

< form > < / form > tags surround the forms definition. Inside the

tag you must include the method=post attribute which tell the browser to send the form to the location you specify.

Use the action=attribute you specify the CGI script location.

For example:
< form method=post action="http://www.geocities.com/cgi/ingo.pl" >

Several different kinds of posting forms exist. method=post is the most common attribute that tells the way the data is written to the cgi.

You can bypass the cgi script on the server by having the page emailed to you. Instead of script you can enter an email inside the tag.

For example:
< form method=post action="mailto:[email protected]" >

Add Text Fields

To add a text field you must label each field with a description. The description can appear above, below or to the left or right of the text box. after opening the < form > tag you enter the title.

Example:
< p > Please type your full name:

You have just created a prompt. A prompt is a word, sentence or special character that indicates what the text field should hold.

NOTE: Never makes a text field without a prompt of the users will not know what to type.

To place the actually text box that will receive the data use the < input > tag.

This tag needs 2 attributes:

type= this tells the type of control it is

name= this names the data value so that the cgi script can keep data separated form each other.

If the users is to enter text use type=text attribute. Example:
< form method=post >
< p >your name:
< input type=text name=fullname >

< p >your address:
< input type=text name=address >
< / form >

your name:

your address:

If you choose to have the information mailed to you then it will appear in your email like this:

fullname=John Smotih
address=408 N 15th St.

NOTE: use a monospaced typeface for your field prompts. with this typeface every letter takes the same width on the screen. this is so you can control the spacing and alignment of the prompts for your forms.

< form method=post >
< p> < font face="monospace" >
your name:
< input type=text name=fullname >

< p>
your address:
< input type=text name=address >

< / font >
< / form >

Use size= and maxlength attributes to control how the user enters information into the boxes. The size= attribute determines how wide the text box, in characters will be. maxlength= lets you say exactly how many characters they can write.

< form method=post >
< p >
< font face="monospace" >
your name:
< input type=text name=fullname >

< p >
Today's Date:
< input type=text name=date size=10 maxlength=6 >
< / font >
< / form >

You can specify tabindex=attribute to control which box the cursor will move to next when the user presses tab.

If you want your users to put a secret code into the field such as a password or credit card, use the type=password attribute instead of text. This will cause asterisks to appear instead of the text they type.

< form method=post >
< p >
< font face="monospace" >
your name:
< input type=text name=fullname >

< p>
Password:
< input type=password name=pass size=10 maxlength=8 >
< / font >
< / form >

For some fields that have set answers, you might want to supply default values, these are values that appear in the fields that your users can keep or change it the data happens to be incorrect.

< p >Type your State: < input type=text name=state value=NH size=2 maxlength=2 >

Type your State:

Large text areas

You do not have to limit input fields to a single line. Your input fields can span several rows and columns. Theses text areas let users enter text freely.

This could be used for:

sites that ask for customer feedback

customer service sites

message board sites that ask opinions

A large text area might be needed on sites that request specific instruction along with the name and address.

NOTE: The text area's scroll bar will becomes active when the user type more lines then will fit on inside the visible text area.

< textarea >< / textarea > tags enclose the field you want to specify as the text area. The < textarea > can be used with these attributes:

name= name the text field

rows= specifies the number of rows appearing on the screen

cols=specifies the number of columns on the screen.

wrap= this determines whether of not the text will automatically wrap with in the text area.

You can also specify default text within the text box.

< textarea name=info rows=5 cols=25 wrap >
Type Information Here
< / textarea >

Type Information Here

Here is a simple but useful form

< form action="http://www.response-o-matic.com/cgi-bin/rom.pl" method="POST" >
< table >
< tr >
< td >From (email address):
< /td >

< td >
< input type=text name="visitor_email_address" size=30>(required)
< / td >
< / tr >

< tr >
< td >
To (email address):
< / td >

< td >
< input type=text name="your_email_address" value="[email protected]" size=30>(required)
< / td >
< / tr >

< tr >
< td >Subject:
< / td >

< td >
< input type=text NAME="email_subject_line">
< / td >
< / tr >
< / table >
< p >

< input type=hidden name="required_fields" value="visitor_email_address,your_email_address" >
< input type="hidden" name="print_blank_fields" value="on" >
< input type="hidden" name="thank_you_title" value="Thank you!" >
< input type="hidden" name="return_link_url" value="javascript:history.go(-2)" >
< input type="hidden" name="return_link_name" value="The page before last" >
< input type="hidden" name="background_color" value="#ffffdd" >
< input type="hidden" name="text_color" value="#000000" >
< input type="hidden" name="link_color" value="#0000ff" >
< input type="hidden" name="visited_link_color" value="#FF0000" >
< input type="hidden" name="active_link_color" value="#00ff00" >
< textarea name=" " cols=60 rows=10 wrap=hard >
< / textarea >
< br > < input type=submit value="Send" >
< / td >
< / tr >
< / table >

From (email address):	(required)
To (email address):	(required)
Subject: