HTML Form Tutorial, Part I
This is the first of a 2-part article.
HTML web page forms are a means of collecting information. People
fill in a form and/or select something. Then they click a
button. (There are ways to cause a form to be submitted
without the user clicking a button. Those are, however,
outside the scope of this 2-part article.)
Forms don't actually process information. They merely
provide the means to collect information for submission
to form information processing software.
For something to be done with the information, it must be
sent somewhere. Information can be processed by CGI
programs, PHP pages, JavaScript functions, and mailto: links.
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.
Building a Web Page Form
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
accompanying from processing software will specify the
<form> tag attributes expected by the installation.
Be that as it may, we'll address form tag attributes so you
have in information you need to make determinations.
Where Form Submitted Information Is Sent
The <form> tag attribute that specifies where the
information will be sent is the action attribute.
Sending Form Information 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 may contain either a relative URL or an absolute
URL. With a relative URL, it would look something like
this:
action="/cgi-bin/something.cgi"
However, 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/something.cgi"
Sending Form Information To PHP Page
The procedure for sending form information to PHP pages is
similar to sending it to CGI programs. The URL of the form's
action attribute is the URL of the PHP page where the form
information is to be sent.
Sending Form Information 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:name@domain.com"
If you also want to specify a subject for the email:
action="mailto:name@domain.com?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.
How Form Submitted 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/something.cgi?color=red&shape=round
In the above URL, the part after the question mark is
information sent to something.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 one or the other.
Sending With Method POST
method="POST" is the most common method used to send
information from a form to information processing
software.
The POST method can send much more information than the
typical GET method. Browsers may limit the amount of POST
information to 32k.
With POST, the information is not sent via the URL. Instead,
it is sent as content invisible to the form user.
Specifying the Encoding Method for the Information Being Sent
The final <form> tag attribute we'll cover in this
tutorial specifies how the form information will be encoded
before sending it to wherever it's going. That's the
enctype attribute.
The browser encodes the form 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 lists and list boxes), <textarea> (for multi-line
text areas), and <input> (for the rest).
Every form related tag has a name attribute. The name
attribute is not required to build the form but may be
necessary for the software the information will be submitted
to.
The assigned name is sent with the information and helps the
receiving software identify the information chunks it
receives.
Some receiving software programs 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"
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.
Every input tag requires a type attribute.
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
A submit button is 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 software's
requirements are.
In this example, it does not have a name but it does have
a value:
<form method="POST" action="/cgi-bin/something.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/something.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 field. You may use neither, one, or both of those
tags.
Here is an example:
<form method="POST" action="/cgi-bin/something.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/something.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="checked" attribute. Example:
<form method="POST" action="/cgi-bin/something.cgi">
<input type="checkbox" name="c_blue" value="yes" />
<input type="checkbox" name="c_red"
value="yes" checked="checked" />
<input type="checkbox" name="c_pink"
value="yes" checked="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 software to process. In some cases, the receiving
software might require the checkboxes to have the same name,
but do it that way only if instructed to do so.
— The type="radio" Attribute
The value of only one radio button in a set is sent to the
receiving software, 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="checked"
attribute:
<form method="POST" action="/cgi-bin/something.cgi">
<input type="radio" name="color" value="blue" />
<input type="radio" name="color"
value="red" checked="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
To upload a file from the user's computer to the form
information processing software, the type="file" attribute
is used. (To use this attribute, the <form> tag must
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 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/something.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 software that the user may not
change and to keep it invisible. This information is usually required by the software in order to process the other information
and/or to determine what to send 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/something.cgi">
<input type="hidden"
name="nextpage"
value="http://example.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/something.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/something.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
so, 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/something.cgi">
<input type="text" name="url" size="17" maxlength="44" />
<input type="image"
src="myimage.gif"
border="0"
align="right" />
</form>
Part II
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.
Will Bontrager
©2001, 2008 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
