Web Page Forms
This tutorial is intended to supplement my Perl/CGI and JavaScript tutorials.
Web page forms were the first interactive capabilities made available
to web developers, followed by the use of CGI scripts and more recently by
the rise of JavaScript. All three can act in concert to create exciting,
but more importantly, useful web pages.
The reason for forms is pretty basic. Originally, web pages were static - you
asked for a web page content from a web site and that's all you got. There
was no method for a user to pass information on to a web site for
subsequent processing.
Forms changed all that! A form is simply a named group of buttons,
textboxes, checkboxes, radio buttons, selectable lists or clickable images
which collect information from the user and pass it to a web site for action.
Not exactly real-time, two-way interactivity but a big step forward. The
name of a form comes into play later - see my JavaScript tutorial for more
information.
A web developer can put one or several forms on a page, each acting
independently of each other. Within each form you can create as many
input elements (textboxes, textareas, checkboxes, radio buttons,
clickable images or selectable lists) as you want on a page. All forms
allow a Submit button which, when pressed, can submit the status of each
input element to a web server. Once there, a CGI script may be used to
process the information, including the creation of a web page in response
to the submittal of information. My CGI/Perl tutorial covers this topic.
Return to top of document
Form Tag
Creating a form couldn't be simpler. In the body of the web page, just put
the following code:
< form action="mailto:gbeene@airmail.net" method="post" enctype="text/plain" >
< /form >
With just this code, nothing would be displayed. To see something you
have to add one of many form elements which I will cover later in this
tutorial. First, I'll discuss the three attributes (action, method, enctype)
you can use in a form tag. All three are optional, but how you use them
determines what happens when you press the Submit button on the form.
Action
The "Action" tag is simply a URL which is used when the Submit button of a
form is pressed. In practice, there are 3 useful values which you will use
in a form. There are other options, but the vast majority of web page forms
use one of these three:
Web Page
If all you want to do is transport your visitor to another web
page when the Submit button is pressed then simply set the action
tag to the page URL as follows, using whatever URL you choose:
action="http://www.vbinformation.com"
CGI Script
If you want a web server to execute a CGI script using the
form information, then you use the following syntax:
action="/cgi-bin/cgiemail/feedback.txt"
In this example, the CGI script 'cgiemail' is found on the web
server in the cgi-bin directory and uses the feedback.txt text
file as a template for a response. This particular CGI script
responds to the user with with a web page acknowledging receipt of
the form information and then emails the web site owner with the
information in an easy to read format. The creation and use of
such scripts is covered in my CGI/Perl tutorials. Not all CGI
scripts require a file name when they are called, so the action
attribute may simply be the URL of the script alone.
MailTo
The web browser itself is written with the ability to generate an
email to an email address of your choosing. To make this happen when
the Submit button is pressed, the following action tag is used:
action="mailto:gbeene@airmail.net"
This approach will have your browser call up your default email
application, pre-addresed to the email address you put in the
action attribute. While this is a quick and dirty approach, the
use of a server-side email CGI script is preferred (as in the
example above) because it provides more flexibilty and does not
require the use of the local email application.
Method
This tag determines only how the information is sent to the web server for
action and is transparent to the user of your page. Normally, an HTTP
query to a server consists of information contained in a string that the
server will interpret. The method attribute will determine how the form
information is added to that HTTP query string - as a single long string,
or as two separate strings. Both can be accepted by a server but the CGI
script that is receive the data will normally be written to expect one or
the other. A CGI script could be written to accept and process the form
data regardless of how it was transmitted, but this is generally not done.
Web site developers will often use pre-written CGI scripts which means they
must follow the method proscribed by the CGI script. The three
available methods are known as Post, Get and Head.
Post
Submits the form information as a second text string, separate from
the normal HTTP query to the web server. Use this attribute value
as follows:
method="Post"
Get
Submits the form information as one long string, immediately behind
the HTTP query. A '?' is used to separate the query from the string.
You will likely have seen this type of query often since it is used
in many search queries. Use this attribute value as follows:
method="Get"
Head
There are some circumstances where you might want to retrieve just
the header information about a URL, such as date modified to determine
if the file has changed since you last viewed it. Accessing such
a truncated set of information is much faster than grabbing the
entire URL.
method="Head"
Enctype
There's not much to say here. Normally this attribute is left off and the
default 'text/plain' value is used. Unless your CGI script or web server
required a special format, this is the one you will always use.
Return to top of document
Input Elements
Inputs are the real meat of a form and there are eight possibilities. First,
however, here is the list of seven attributes which can be used with the
input elements. In the element list that follows, I show which attributes
can be used with which input element - but you'll see that it is pretty
obvious:
First, the attributes are:
name
Gives a name for the input element. It is used by the CGI script on
the server to keep the incoming data separate. All input elements
use this attribute.
type
Determines which of the input elements are displayed (see the full
list below).
value
Determines the initial content of a textbox, hidden, or password
input elements. Also defines the label for the submit and reset buttons.
checked
Determines whether the starting state of a checkbox or radio button
is checked.
size
Determines the display length of an input element (text or password)
maxlength
Determines the maximum length of a string that can be captured and
sent to the server.
src
Used only with the image element, this identifies the source URL of
the image that is to be displayed.
rows, cols
Used only with the textarea element. Determines the display size
of the area where text can be entered.
Now, here are the input elements which can be inserted in a form on a web page:
Text
Allowed attributes: name, type, value, size, maxlength
This is where a user types in some information.
Here is the text element that this code would generate:
Checkbox
Allowed attributes: name, type, value
Like any checkbox, click on it to change its state.
<input type="checkbox" checked">
Here is the checkbox element that this code would generate:
Radio Button
Allowed attributes: name, type, value
Only one radio button can be selected at time. When you click
on one, all the others become unselected. Each radio button
must use the same name attribute.
<input type="radio" value="on">
Here are some radio button elements that this code would generate,
showing that only one can be selected at a time:
You can have one or more groups of radio buttons. Simply give
each member of the second group a new name. This will create a second
group of radio buttons which acts independently of the first group.
Password
Allowed attributes: name, type, value, size, maxlength
This is exactly like a textbox, but when the user types in something,
only "*" characters are displayed. However, when the form is submitted
to the web server it is sent as plain text. So don't mistake the
"*" display as being some form of encryption for transmission over the
web. It only provides protection against someone looking over your
shoulder as your type.
Here is the password element that this code would generate:
Hidden
Allowed attributes: name, type, value, size, maxlength
Sometimes you want to pass information to the web server which is not
generated by the user. The hidden element allows you to place information
on the web page which is not displayed, but which is sent to the web server
when the Submit button is displayed. This feature is most useful when
the page that is being displayed has been generated dynamically (created
on the fly by the web server and sent to your browser as a response to
a prior query). With the hidden element the form can contain information
that will tell the server something about the prior request. As you will
see in my JavaScript tutorial, the hidden element can also be used to
stored information generated locally (using JavaScript) as a result of
user input before the user information is actually sent to the
server. An example of this would be a total of a user's order on a
commercial site - where the total is generated by a JavaScript and stored
in a hidden element for transmittal to the web server.
<input type="hidden" value="secrettext">
Remember, the hidden element is not displayed by the browser, but its
value is sent along with all other form information to the web server.
Image
Allowed attributes: name, type, src
For some reason, this input element is not often discussed in the
tutorials that I've seen. Most likely it is because the normal
image tag for a web page supports the MAP attribute which essentially
does the same thing. But, even so, you can insert an image into the
form and when a use clicks on the image you get the same effect as
though the Submit button was pressed. The location on the image where
the mouse was clicked will be sent as part of the form's information.
Remember that a picture looks no different in a form than it does
anywhere else on a web page. Clicking on a form image will cause the
form to respond as thought the form's Submit button was pressed.
Button
Allowed attributes: name, type, value
This input type is simply a button like any other you've seen.
However this button doesn't do anything in a form - unless you
make it. The Reset and Submit buttons described below are special
cases of a standard "button" type. Both the Reset and Submit
types of button are automatically recognized by a form, but pressing
a standard button will not cause anything to happen at all - unless
you use one of the scripting language to respond to the Click event.
See my JavaScript tutorial for more information on this topic.
<input type="button" value="Reset">
Here is the reset element that this code would generate:
Reset
Allowed attributes: name, type, value
Press this button, and all the input elements will be set to their
"value" attribute value. For fill-in-the-blank forms, this is equivalent
to clearing all input fields.
<input type="reset" value="Reset">
Here is the reset element that this code would generate:
Submit
Allowed attributes: name, type, value
Press this button and the information in the form will be sent according
to how you've set the value of the 'action' attribute on the form tag.
<input type="submit" value="Submit Form">
Here is the submit element that this code would generate:
One comment here: If you create a form which has only 1 text input
element (nothing else, including no buttons), then pressing enter while
the cursor is in the text box will cause the form to act just as though
a Submit button were pressed - even though there is not Submit button.
Return to top of document
Select Element
One of the useful ways of presenting data is to provide a scrollable list
for the user to select from or to display a single item with the option of
presenting a drop-down list from which the user may select an item. This
approach is typically used to minimize the size of the display - showing just
a few short lists rather than displaying one long list with every single
item for the user to select from. Here is such a list and the code which
generates it:
The optional presence of the multiple attribute allows the selection of
more than one item from the list. Here is the select element that this
code would generate:
And without the multiple and size codes you get a dropdown list:
Return to top of document
Textarea Element
Allowed attributes: name, value, rows, cols
Similar to a textbox, but allows the user to view or input multiple
lines of text. It uses a tag that is more like a normal HTML tag:
