Tutorial
HTML
Dreamweaver
|
s
Tutorial HTML - Creating Forms
Forms
-
A
form is simply another type of HTML document, or part an existing
HTML document, that allows users to provide input by performing
any of several actions.
-
The server must run a program called a CGI (Common Gateway
Interface) program to do something with the data sent in from
the form.
-
The CGI program is usually written in a language like Perl,
C, or even in a shell script on UNIX machines.
<FORM>
- The
<FORM> container holds all the other contents of the form.
-
This container has three attributes: ACTION, METHOD, and ENCTYPE.
- ACTION
- The
ACTION attribute points to the application that is going to
process the data captured by the form.
-
You can have the data sent to the server and processed by
a CGI script, or you can have the data e-mailed directly to
your mailbox.
-
Common Gateway Interface (CGI):
-
If you choose to use the CGI method, the URL of the CGI
script should specify not only the path but also the filename
of the receiving program.
- <form
action="http://www.wilbur.com/cgi-bin/form.pl"
method=post>
-
Electronic Mail:
-
Send e-mail containing the data that were collected by
the form.
- <form
action="mailto:someone@somewhere.com" method=post>
- METHOD
-
The METHOD attribute tells the browser how to send the data
to the server.
-
There are two ways the data can be sent: GET or POST.
-
GET:
-
GET method creates a long string that contains all the
data the user entered.
- It
sends those data back to the server, where they are placed
into a single environmental variable and made available
in that form to the CGI application.
-
POST:
-
POSTing data allows you to send much more information
to the server.
-
However, it entails a second transmission across the Net
to establish communication before the data are sent.
- GET
vs POST
-
If you are sending just a few bytes of data, use GET. That method
is fine for short data streams and is easy to process.
-
When your form processes more data, or if it has a potentially
long text field, use the POST method to ensure that data won't
be truncated (chopped off) and lost.
-
It is easier to build a CGI script to support GET than POST
because you don't need to do the extra steps of decoding POST
parameters.
-
POST can be a more secure method of transmission than GET.
- ENCTYPE
-
The ENCTYPE attribute allows you to specify a different encoding
format for the data sent from the form to the CGI script.
-
The normal coding type is called application/x-www-form-encoded.
This coding is necessary to prevent the data from becoming
corrupted during transmission from the browser to the server.
<INPUT>
- The
<INPUT> tag is the tool most often used to create the actual
input areas of a form.
-
All the different forms of input require the use of the NAME attribute,
and all the <INPUT>forms require the TYPE attribute.
- NAME:
-
Every form of input except the immediate buttons (submission
and reset) requires the NAME attribute.
- The
NAME attribute specifies the label, or name, that makes up
the left half of the NAME=VALUE pair.
-
Make the name meaningful.
- Use
lowercase letters for the name.
-
Start the name with an alphabetic character.
-
Make the name continuous.
TYPE=TEXT
- Text-entry
fields, TYPE=TEXT, are probably the most common type of <INPUT>
field on most forms.
-
SIZE attribute specifies the size of the text-entry field.
-
MAXLENGTH attribute limits the actual number of characters the
user can enter.
-
VALUE attribute use only when you think that the user will most
likely take the default value you have provided.
TYPE=PASSWORD
-
If you set the TYPE to PASSWORD, anything the user types will
appear as special characters, like asterisk.
TYPE=CHECKBOX
-
Using a checkbox or a set of checkboxes is an easy, fast way for
your user to enter data is to select and deselect different items.
-
Several checkboxes from a series can be selected.
- Please
remember, you MUST put the same name for all the checkboxes.
E.g:
<input type="checkbox" name="choice"
value="blue">blue
<input type="checkbox" name="choice"
value="red">red
TYPE=RADIO
-
Radio button is best when you want to ensure that the user selects
only one option.
-
Please remember, you MUST put the same name for all the
radio buttons.
E.g:
<input type="radio" name="option"
value="blue">blue
<input type="radio" name="option"
value="red">red
TYPE=RESET
-
TYPE=RESET provides a button that causes the browser to reset,
or change, all the input areas back to the way they were when
the user entered the page.
TYPE=SUBMIT
-
TYPE=SUBMIT button does what it implies - it starts the process
of the browser encoding and sending the information to the server.
up
EXERCISES
Please
copy these exercise into Notepad and save (Don't forget to put
.html). Then, launch Internet
Explorer and go to File > Open > Browse (find your
saved file). Click OK.
up
Creating
Tables | Overview of Dreamweaver
Copyrights
Reserved © Web Publishing 2003
|
|
-
Assignment
1
-
Assignment
2
-
Quiz
1
-
Quiz
2
- Project
|
Announcement
To
all my students!
Please
visit this web site regularly.
|
|