This is the first part of a 2-part series. Look for the 
second part next week, right here.

HTML forms are a means of collecting information. People 
fill in a form and/or select something. Then they click a 
button.

 This article was written by William Bontrager. If you have any questions please contact him 
through his website.

Part 1  

Forms don't actually process information.

For something to be done with the information, it must be 
sent somewhere. Information processing destinations can be 
CGI programs, JavaScript functions, mailto: links, or even 
a web page (which directs the browser to load the page at 
the specified URL).

This tutorial is about how to make forms and how to send 
the information, but not how to process the information 
after it has been sent off.

Forms begin with the <form> tag and end with the </form> 
tag. The <form> tag can contain several attributes.

Sometimes you'll need to determine the applicable 
attributes. Other times, installation directions for CGI 
programs or JavaScript functions specify the <form> tag 
attributes expected by the installation.



:: Where Information Is Sent

One <form> tag attribute specifies where the information 
will be sent. That's the "action" attribute.


~ Sending To CGI Programs

If the information is being sent to a CGI program on the 
same domain as the web page containing the form, the action 
attribute can contain either a relative URL or an absolute 
URL. With a relative URL, it would look something like 
this:

action="/cgi-bin/handler.cgi"

If the information is being sent to a CGI program on a 
different domain, the URL must be absolute (a complete 
http://... URL):

action="http://domain.com/cgi-bin/handler.cgi"


~ Sending To JavaScript Functions

When sending form information to a JavaScript function, the 
action attribute would look something like:

action="javascript:SomeFunction()"

or, the action attribute might be replaced with the 
JavaScript specific "onClick" attribute:

onClick="return SomeFunction()"

If the form information is to be sent to both a JavaScript 
function and to a CGI program, then both the action and the 
onClick attributes would be specified.


~ Sending To mailto: Links

To send form information to the visitor's email program, 
with the To: destination already filled in, use:

action="mailto:
"

If you also want to specify a subject for the email:

action="mailto:
?subject=My%20Subject"

(Use "%20" instead of spaces when specifying a subject.)

Note that not all browsers recognize the mailto: link. It 
is suggested you use this only as a last resort.


~ Sending To a Different Web Page

To send form information to a different web page so the 
browser opens the page at the new URL, use:

action="http://newdomain.com/page.html"



:: How Information Is Sent

Another <form> tag attribute specifies how the information 
will be sent to wherever it's going. That's the "method" 
attribute. The method attribute is either

method="POST"

or

method="GET"

Which you use depends on how the destination program or 
function wants to receive the information.


~ Sending With Method GET

method="GET" is used if you want to send information 
somewhere via a browser URL. You've seen URLs that send 
information; they look something like:

http://domain.com/handler.cgi?color=red&shape=round

In the above URL, the part after the question mark is 
information sent to handler.cgi. Multiple information 
chunks are separated with an ampersand.

The GET method can send only a limited amount of 
information. The limitation depends on the server where the 
current web page is on and the server where the information 
is sent to. The limitation can be as little as 256 bytes 
but is often 1k or more.

Another limitation of the GET method is that the 
information being sent is visible in the browser's address 
bar. In some cases this is of no consequence. In others, it 
is unacceptable.

Some CGI programs are written to accept information via the 
GET or the POST method, some to accept only the GET method.


~ Sending With Method POST

method="POST" is the most common method used to send 
information from a form to an information processing 
program or function. This is the method used when sending 
form information to JavaScript functions. Most CGI programs 
are written to accept information with the POST method, 
some to accept only the POST method.

The POST method can send much more information than the 
typical GET method. Currently, most browsers and servers 
limit the amount of POST information to about 32k.

With POST, the information is not sent via the URL. The 
sending is invisible to the site visitor.

It is not necessary to know the exact interior mechanism of 
how POST works, because all you have to do is specify the 
method and the browser decides how to accomplish your 
directive. However, as a general overview: depending on 
its destination, the POST information could be transferred 
within the browser itself (if sent to a JavaScript 
function) or over the internet via a method known as 
"standard input" -- the default or standard input channel 
expected by the destination (such as a server for a CGI 
program).



:: Specifying the Encoding Method for the 
   Information Being Sent

The final <form> tag attribute we'll cover in this tutorial 
specifies how the information will be encoded before 
sending it to wherever it's going. That's the "enctype" 
attribute.

The browser automatically encodes the information depending 
on the enctype attribute. Encoding transforms special 
non-alphanumeric characters that could otherwise wreak 
havoc during transmission or upon receipt into a series of 
characters that the receiving program or function can 
recognize. Encoding also inserts separators between the 
information chunks.

Often you don't have to concern yourself with the enctype. 
If you do not specify one, the default is assumed.

The default enctype attribute is:

enctype="application/x-www-form-urlencoded"

If your form includes file uploads, you will need

enctype="multipart/form-data"

And, if you will be using a mailto: link in the action 
attribute, your email body text will be less jumbled if 
you use

enctype="text/plain"



:: Form Related Tags

Between the <form> and </form> tags are the tags that 
create the body of the form. These are <select> (for 
drop-down and menu boxes), <textarea> (for multi-line 
text areas), and <input> (for the rest).

Every form related tag can have a name attribute. Some 
require it, others don't.

The assigned name is sent with the information and helps 
the receiving program or function identify the information 
chunks it receives.

Some receiving programs and functions consider tag names to 
be case sensitive; some do not. If you don't know which 
applies to your form, assume tag names are case sensitive.

Some receiving programs and functions are okay with tag 
names containing spaces; some are not. If you don't know 
whether or not it is okay to use spaces in your form's tag 
names, use underscore characters instead of spaces. 
Underscore characters are almost always okay within tag 
names so long as the name doesn't start or end with an 
underscore.

Here is an example name attribute:

name="my_tag_name"

In most situations, it is highly desirable that no 
duplicate names exist within the form.



:: The <input> Tag

Most of the information forms collect is specified by the 
<input> tag. Single-line text entry fields, checkboxes, 
radio selections, password entry fields, form buttons, file 
upload fields, and image buttons are all specified with the 
<input> tag.

The <input> tag can have several other attributes depending 
on the "type" attribute. It almost always has a name 
attribute. Every input tag requires a type attribute.


~ The "type" Attribute

It is probably safe to say that every form has an <input> 
tag of some kind and that the tag contains the "type" 
attribute. The type attribute tells the browser what type 
of form field or button to create. The type attribute looks 
something like this:

type="_______"

with the underscore representing one of numerous types of 
type attributes.


~ ~ The type="submit" Attribute

The submit button is the most common form element, created 
with the type="submit" attribute. It might or might not 
have a "value" attribute, depending on whether or not you 
want to specify the text of the button. Also, the submit 
button might or might not have a name, depending on what 
the information receiving program or function's 
requirements are.

In this example, it does not have a name but it does have 
a value:

<form method="POST" action="/cgi-bin/handler.cgi">
<input type="submit" value="Click Me!">
</form>

Forms may contain more than one submit button. In that 
case, it is usual for the attributes to have names so the 
processing program or function knows which of them was 
clicked. Example:

<form method="POST" action="/cgi-bin/handler.cgi">
<input type="submit" name="1" value="First Visit">
<input type="submit" name="2" value="Second Visit">
<input type="submit" name="3" value="Third Visit">
</form>


~ ~ The type="text" Attribute

The type="text" attribute is a common form input field. It 
creates a place wherein a line of information can by typed.

If you want to put default text into the input field, use 
the "value" attribute. Example:

value="http://"

Both a "size" and a "maxlength" attribute may be used. 
These specify the size of the text input area and the 
maximum number of characters that may be typed into the 
input area. You may use neither, one, or both of those 
tags.

Here is an example:

<form method="POST" action="/cgi-bin/handler.cgi">
<input type="text" name="url" size="17" maxlength="44">
<input type="submit">
</form>


~ ~ The type="password" Attribute

The type="password" attribute works the same as the 
type="text" attribute except the characters typed into the 
input area are displayed as asterisks. Here is an example:

<form method="POST" action="/cgi-bin/handler.cgi">
<input type="password" name="P" size="9" maxlength="20">
<input type="submit">
</form>


~ ~ The type="checkbox" Attribute

The checkbox either contains information or it doesn't, 
depending on whether or not it is checked. Checkbox tags 
almost always have a "value" attribute.

If you want any checkboxes pre-checked, include the CHECKED 
attribute. Example:

<form method="POST" action="/cgi-bin/handler.cgi">
<input type="checkbox" name="c_blue" value="yes">
<input type="checkbox" name="c_red" value="yes" CHECKED>
<input type="checkbox" name="c_pink" value="yes" CHECKED>
<input type="checkbox" name="c_yellow" value="yes">
<input type="submit">
</form>

In the above example, the user will see four checkboxes 
with the middle two pre-checked.

Notice that each checkbox has a different name. This 
separates the information into different chunks for the 
receiving program or function to process. In some cases, 
the receiving program or function might require the 
checkboxes to have the same name, but do it that way only 
if specified in the instructions.


~ ~ The type="radio" Attribute

Only one radio button in a set contains information, the 
one that is checked. Radio tags almost always have a 
"value" attribute.

If you want to pre-check one radio button, use the CHECKED 
attribute:

<form method="POST" action="/cgi-bin/handler.cgi">
<input type="radio" name="color" value="blue">
<input type="radio" name="color" value="red" CHECKED>
<input type="radio" name="color" value="pink">
<input type="submit">
</form>

In the above example, the user will see three radio buttons 
with the middle one pre-checked.

Each radio button in a set must have the same name. When 
more than one radio button has the same name, only one of 
them can be checked at a time.


~ ~ The type="file" Attribute

If the form information receiving program or function can 
upload a file from the user's computer to your internet 
server, the type="file" attribute is used. (To use this 
attribute, the <form> tag should have the enctype attribute 
specified as "multipart/form-data")

Optionally, you may restrict the type of file the user may 
upload with the "accept" attribute. The accept attribute 
specifies a MIME Content Type. There are many MIME types 
and to list them all would be space prohibitive. However, 
here are those you are most likely to need.

To restrict the uploads to images, use:

accept="image/*"

To restrict to only GIF images, use:

accept="image/gif"

To specify only JPEG, PNG, or TIFF image files, use 
"image/jpg,jpeg", "image/png", or "image/tiff", 
respectively. To specify only GIF and JPEG, use 
"image/gif,jpg,jpeg"

To restrict to text files only, use:

accept="text/*"

To specify HTML files or plain text files, use "text/html" 
or "text/plain", respectively.

Optionally, you may specify the size of the input field and 
the maximum number of characters that may be entered with 
the "size" and "maxlength" attributes.

Here is an example file upload form input area:

<form method="POST" 
      action="/cgi-bin/handler.cgi"
      enctype="multipart/form-data">
<input type="file" name="upfile" accept="image/*">
<input type="submit">
</form>


~ ~ The type="hidden" Attribute

Use the type="hidden" attribute to specify information for 
the receiving program or function that the user may not 
change. This information is usually required by the program 
or function in order to process the other information 
and/or to determine what to sent back to the browser. The 
installation instructions of the program or function should 
specify what hidden fields are required, if any.

Here is an example:

<form method="POST" action="/cgi-bin/handler.cgi">
<input type="hidden" 
       name="nextpage" 
       value="http://willmaster.com/">
<input type="submit" value="Click For Next Page">
</form>


~ ~ The type="reset" Attribute

This attribute creates a reset button. Clicking that button 
will reset the form to the state it was in when it was 
first loaded into the browser. It might or might not have a 
"value" attribute, depending on whether or not you want to 
specify the text of the button. It rarely requires a name 
because the reset button's value is rarely used by the 
receiving program or function.

In this example, it does not have a name but it does have 
a value:

<form method="POST" action="/cgi-bin/handler.cgi">
<input type="text" name="url" size="17" maxlength="44">
<input type="reset" value="Erase Everything!">
<input type="submit" value="Submit Now!">
</form>


~ ~ The type="button" Attribute

This attribute creates a clickable button with text you 
specify in the "value" attribute. This type of button is 
typically used to send information to a JavaScript function 
with the "onClick" attribute. In this case, a submit button 
may be optional. Example:

<form method="POST" action="/cgi-bin/handler.cgi">
<input type="text" name="email" size="17" maxlength="44">
<input type="button" 
       value="Verify Email Address"
       onClick="return EmailVerification()">
<input type="submit">
</form>


~ ~ The type="image" Attribute

An image may be used instead of a submit button. To do 
that, use the type="image" attribute.

When using the type="image" attribute, the "src" attribute 
must be specified. The src attribute is specified like you 
would specify the src attribute in an <img> tag to place an 
image on a web page. Optionally, you may include "align", 
"border", "height", "width", "hspace", and/or "vspace" 
attributes, just like you would in an <img> tag.

When the user clicks the image, the form submits its 
information to the program or function specified in the 
<form> tag.

Here is an example:

<form method="POST" action="/cgi-bin/handler.cgi">
<input type="text" name="url" size="17" maxlength="44">
<input type="image"
       xsrc="myimage.gif"
       border="0"
       align="right">
</form>


Part II of this tutorial introduces the <textarea>, 
<select>, and <option> tags. It will also have some 
other goodies, including a complete form with the 
tags mentioned in this tutorial.

Forms can be fun.

With a little practice, you can be an expert.

William Bontrager

Copyright 2001 William Bontrager Programmer/Publisher,

Authros webstie http://willmaster.com/possibilities/