Forms consist of a form tag and input elements. The input elements
is where the user will enter information. Input elements take the shape
of text input boxes, radio buttons, check boxes and drop down lists
or menus. All the input elements in a form are contained within form
tags.
We'll get into the specific input tags in a moment. For now let's just
look at the Form tag.
<form>
input elements go here
</form>
Form tags for a real functioning form will have three attributes.
METHOD
Takes one of two arguments. Either Post or Get
ACTION
This takes the form of a URL where the information
from the form will be processed
NAME
The name of the form. This is important to allow JavaScript
awareness of the entire form
To Post or to Get, that is the Question
The Get Method adds the information from the form to the action web pages
URL. This will be visible within the address bar of the browser window.
In the window that opened you should have seen something like this.
This is referred to as a Query String. The query string begins at the
end of the URL where the question mark is. You've probably noticed one
before when using search engines or shopping on-line. A URL with a Query string can be bookmarked. If you were shopping
for an item and located it using a search, a bookmarked URL with Query
string would bring you back to that particular item. On-Line retailers
like this.
So what if you don't want the user to see what is being sent within the address? Use Post. Post conceals the information from the user by placing the data in the message body - not in the URL.
As mentioned previously, real working forms would be submitted to a web server. The true processing of the form information is done on the web server. The value of the action attribute is the URL where the programming code exists on the server to handle your form data. The code would receive the data and process it accordingly.
The action attribute may also take the form of an email address. This will trigger the users default email applciation to send the form data. This method is not always reliable however. To ensure the form data arrives in a readbale state, add the following attribute/value pair: enctype="text/plain"
Here is what an email action would look like:
<FORM METHOD="post" ACTION="mailto:dougj@digitalvertebrae.com"
name="myForm" enctype="text/plain">
Name <form method="post" ACTION="myactionscript.php"
name="myForm">
The name attribute allows you to identify the form on the web page.
This can be important if you have more than one form on a page or need
to access the form with JavaScript. As you have seen previously, you
should name the form meaningfully. If your form is a survey about favorite
dog breeds, name it "favorite breeds".
Input Elements The information sent to the server for processing comes from
the Input Elements. The data they carry consists of the name of
the input element and the value of the data of the input element.
Text Field
Text Fields used generally for name and address
information or anything that the programmer can not readily
predefine. The name argument can be anything you choose. It
should however relate to the information that it is requesting.
For example - city. Additional attributes include size and maxlength.
Similar to what a text field does, but allows for multiple
lines of information. The text that appears between the <textarea>
</textarea> tags becomes the value of this input element.
The cols attribute defines how wide the field will appear. The
rows attribute defines how high the field will appear.
Check boxes allow the user to make multiple choices.
You will notice in the sample HTML below, all the checkboxes
have the same name. By naming them the same, they will belong
to the same group. If
I were to name three check boxes "ice-cream" with
each having a respective value of "Chocolate", "Vanilla",
and "Strawberry", the form would submit ice-cream
= Chocolate, Strawberry - where the user had selected those
two flavors.
Radio buttons only allow for the user to make a single choice.
Keeping the names the same is important here. For any question,
the user should only be able to select one answer.
Menus give the user a variety of choices in response to a
question in the form of a drop down menu. This is simpler to
put together than a long array of check boxes. The actual tag
for Select Menus and Select List is the same <select>.
To change form a Menu to a list, a couple of other parameters
are added (see below). After the select tag, we add our options,
each having it's own specific value. After all options have
been defined, we close off with a close </select> tag.
By default, the field will initially be blank. We can specify
an actual value by adding the keyword selected within the option
tag. This is the case with Gimli in the example below.
To change a menu to a list, we add a size attribute. In the
example below, the size is set to seven so that we can see all
possible options. We have given the user the option to select
more than one item by adding the attribute multiple to the select
tag as well. If there are more items to be displayed beyond
what the size is set to, scroll bars will appear within the
list window.
Buttons are the final element we will look at.
Essentially these buttons are triggers that will effect the
form in different ways The Submit button will send the data
from the form on its way to the server.
<input type="submit" value="Submit">
Reset Button
Buttons are the final element we will look at.
Essentially these buttons are triggers that will effect the
form in different ways The Submit button will send the data
from the form on its way to the server.
<input type="reset" value="Reset">
A Complete Form
Now that we have looked at the various form input
elements, let's look at a complete form. Notice that I have
placed the form elements in table cells seperate from the questions
themselves. This helps keep the form neat and organized.
