Deciding What Information You
Need To Gather.
This may seem obvious, but your first
step is to just sit down with a pad and pen and decide
what information you need to gather, what is required
and what is optional, and also to decide how to present
your form, along with which tag elements to use.
For our example form, we obviously need
to gather informarion regarding our customers installation
- server info, ftp info, which script we're installing,
and of course our customers name, email address and other
personal information.
For this exercize, we will collect the
following information:
Name:
Contact Email:
Alternate
Contact Email:
Telephone
Number:
Script to be Installed:
Web Host Name:
Domain Name:
Control Panel URL:
C/P User Name:
C/P Password:
Your Payment Receipt #:
How did you hear about our services?:
Designing our form.
My guess is that you probably have tried to create a form
already, and have noticed that it is fairly impossible
to get a nice clean layout using The <BR> and <P>
tags. This is because the browser is using proportional
spacing. This means that a W uses more space than an i
to display. The browser also ignores any extra spaces
you might put in to try and pad things in an effort to
align your form elements. There are two ways around this
problem.
-
Tables. You can place your various form elements in
a table, or tables if needed. This is a good way to
format your form, but it CAN increases your chances
for creating hard to find bugs.
- <PRE></PRE>
Tags. This method tells the browser to accept your formatting
as entered. You do not use the <BR> or <P>
tags to start a new line, just enter a new line! Also,
it will use leading spaces as well as spaces between
words to make your attempt to line things up work as
you intend. This is accomplished by having every character,
no matter how wide or narrow, use the same amount of
space.
For
the purposes of this tutorial, we will be using the Tables
method of formatting. The reason is because most beginner
HTML users are more familiar with Tables. We will be creating
a simple 2 column table for our tutorial. That means our
form will flow from top to bottom.
As
you become more familiar with form building, you can create
more visually appealing or more complex forms using tables.
But for now, let's just keep it simple.
Based
on our list above, we will need a table with 2 columns
and 12 rows (I also put in a cell pad of 5 to add space
between the cells):
Note:
You don't need the border of the table to be showing,
but it's easier for our tutorial.
Now,
let's put our "Names" in the left column (I
also use the "Align Right" to make it look neater):
At
this point, let's make sure that the information we are
gathering is everything you need.
We
also need to define this as a form. For this, all we need
to do is to place the FORM elements around the table,
like this:
Look
for the table start tag: <table width="70%"
border="1" align="center" cellpadding="5"
cellspacing="0">
Now,
place the form start tag before it: <form><table
width="70%" border="1" align="center"
cellpadding="5" cellspacing="0">
Next,
put the form closing tag AFTER the table closing tag:
</table></form>
Now,
everything within our table is part of our form.
Tired of paying others to install your scripts for you?
Are you interested in telling your script installer to "Take a hike!"?
Then you need Install Your Own Scripts. The new ebook from script installer Michael Ambrosio. It's Jam-Packed with extremely easy to follow step-by-step script installation lessons.
And you learn by actually installing THREE different scripts!
Don't delay. Order Now.
Tell your installer to Take A Hike! |
Adding
Tag Elements:
My
design editor of choice is Dreamweaver, which has the
ability to add form elements at the click of the button.
Many editors can. If your does not, don't worry. You can
add the tag elements by hand by following the tutorial
parts 1 and 2.
Ok,
let's move on. We need to decide which elements we will
use for each part of the form:
Ok,
now let's look at the source code for this form:
<form>
<table width="70%" border="1"
align="center" cellpadding="5"
cellspacing="0">
<tr>
<td width="52%"> <p align="right">Name:</p></td>
<td width="48%"><input
name="name"
type="text"
id="name"
size="25"></td>
</tr>
<tr>
<td><div align="right">Contact
Email:</div></td>
<td><input name="email1"
type="text"
id="email1"
size="25"></td>
</tr>
<tr>
<td><div align="right">Alternate
Contact Email:</div></td>
<td><input name="email2"
type="text"
id="email2"
value="Alternate Contact
Email" size="25"></td>
</tr>
<tr>
<td><div align="right">Telephone
Number:</div></td>
<td><input name="phone"
type="text"
id="phone" size="25"></td>
</tr>
<tr>
<td><div align="right">Script
to be Installed:</div></td>
<td><select name="scripts"
id="scripts">
<option selected>Script
1</option>
<option>Script 2</option>
<option>Script 3</option>
<option>Script 4</option>
<option>Script 5</option>
</select></td>
</tr>
<tr>
<td><div align="right">Web
Host Name:</div></td>
<td><input name="webhost"
type="text" id="webhost"
size="25"></td>
</tr>
<tr>
<td><div align="right">Domain
Name:</div></td>
<td><input name="domain"
type="text" id="domain"
value="http://"
size="25"></td>
</tr>
<tr>
<td><div align="right">Control
Panel URL:</div></td>
<td><input name="cpanel"
type="text"
id="cpanel"
value="http://"
size="25"></td>
</tr>
<tr>
<td><div align="right">Control
Panel User Name:</div></td>
<td><input name="cpuser"
type="text"
id="cpuser"
size="25"></td>
</tr>
<tr>
<td><div align="right">Control
Pane lPassword:</div></td>
<td><input name="cppass"
type="text"
id="cppass"
size="25"></td>
</tr>
<tr>
<td><div align="right">Your
Payment Receipt #:</div></td>
<td><input name="receipt"
type="text"
id="receipt"
size="25"></td>
</tr>
<tr>
<td><div align="right">How
did you hear about our Services?:</div></td>
<td><br>
<input name="search"
type="checkbox"
id="search"
value="checkbox">
Search Engine
<br>
<input name="recommend"
type="checkbox"
id="recommend"
value="checkbox">
Recommended
<br>
<input name="ads"
type="checkbox"
id="ads"
value="checkbox">
Ezine Ad
<br>
<input name="other"
type="checkbox"
id="other"
value="checkbox">
Other
<input name="other"
type="text"
id="other"
size="20">
</td>
</tr>
<tr>
<td colspan="2"><div align="center">
<input type="submit"
name="Submit"
value="Submit">
<input type="reset"
name="Reset"
value="Clear Form">
</div></td>
</tr>
</table>
</form>
|
I
have made all of the tag elements orange, and the ID's
(inside the quotes) blue, so it's easier to identify.
You'll notice that in all of the Text fields, I defined
the size of them all, but left the maximum characters
blank. That means the BOX may be 25 characters, but the
user can type in as many as they want. It will scroll
to the right.
I
have also given unique names to all of the tags. This
is PARAMOUNT to proper operation of the form once it's
submitted to your server.
The
best thing for you to do now is to review this lesson
and the code above. You will begin to understand more
clearly how to build your forms. This one is very basic
and they CAN get very complex. But once you know HOW to
build a form, the complexity will mostly lie in how to
effectively lay it out.
End
of Part 3
Our
next lesson will focus on how to make your form "live".
Until then, practice what you've learned. |