If
you are running any kind of business on the internet
- whether it's a product or service you're selling -
chance are you need a form of some kind. As an example,
you may need certain information from your customers
in order to install a script. You can't find a form
like this, so you'll need to build one.
Building
a form doesn't need to be difficult. It's simply a matter
of knowing the form tags and their functions, labels,
buttons, and how to lay them all out.
We
are going to go through the steps to building a custom
form. After completing this ecourse, you'll be able
to build and use forms for just about anything.
Let's
begin with going through the different tags, labels,
buttons, etc.
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!
NOTE:
There are many different ways to design and build forms.
There are even tools and software that can help you.
This tutorial is designed to give you basic knowledge
as well as an understanding of the tags and their definitions
and use.
If
you already know basic form building you may need a
more advanced course than this one. Every effort has
been made to ensure accuracy and completness of this
course. If you find any errors or have any comments
or suggestions, please email me here:
Creating
a Form Interface
There
are two parts to building interactivity using forms:
building the form interface and processing the results
submitted by your users. This section focuses on the
building a form interface using HTML tags.
The
Form Tag:
Forms
are created using the form
tag and it's attributes.
<form>
</form>
form
tags always begin with an opening form
tag and end with a closing tag. All form elements must
be placed within these opening and closing tags.
Input
Tag:
The
input tag and its attributes are used to
create most of the form elements. The input
tag has no closing tag. The input tag has
many attributes but the only required attribute for
all form elements is type.
The type attribute defines the kind of
form element that will be displayed. Possible values
are: text, checkbox, radio,
password, hidden, submit,
reset, and image. Examples:
<input
type="text">
<input
type=PASSWORD>
<input
type=CHECKBOX>
<input
type=RADIO>
<input
type=SUBMIT>
<input
type=RESET>
<input
type=IMAGE SRC="checkout.gif">
<input
type="hidden" NAME="getCoords"
VALUE="NO">
The
last input type, HIDDEN, is not visiable
to your viewer. It is used to pass information to the
server.
The
NAME Attribute:
The
NAME attribute is used after the user submits the form
and the information is collected and processed. No matter
what you use to process the information, you need a
way to identify each element with the user's input.
The NAME attribute associates the user's input with
the name you supply for each form's element. (The contents
of the NAME attribute our not visible to the user.)
<input
type=text NAME="LastName">
The line of code above would create an input box that
looks like:
Text
Label:
The
Text Label is simply the visible label that the user
sees. This tells them what to put in the text box.
Last Name: <input type=text NAME="lastname">
The line of code above would create an input box that
looks like:
Last Name:
TEXT
& PASSWORD Elements:
The
TEXT box and PASSWORD attributes of the input tag allows
your users to enter a single line of text into a box
on your webpage.
Passwords are displayed by astericks instead of characters
on the screen. The NAME attribute is required.
The SIZE attribute specifies
the size of the input box. The default varies among
different browsers so it is recommended that you specify
a size within all your text boxes.
Last Name: <input type=text
SIZE=30>
Last Name:
Last Name: <input type=text
SIZE=20>
Last Name:
The Maxlength attribute indicates
the number of characters that can be entered into a
text box field. If the maxlength exceeds the SIZE of
the text box, the text will scroll horizontally in the
window while the user enters the information. The default
is to allow an unlimited number of characters.
Last Name: <input type=text
maxlength="10">
Last Name:
The VALUE attribute will display default text
in a text box. The user can type over text.
Last Name: <input type="text" value="Enter
Last Name Here">
Last Name:
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!
The
CHECKBOX input type enables you to create checkboxes
in your HTML form. It allows the user to give a yes
or no type of answer. Yes if the checkbox is selected;
No if it is not.
<input type=checkbox NAME="MailingList" VALUE="Yes">
Add me to your mailing list.
Checkboxes work well for Yes/No type answers. They can
allow your users to select multiple choices from a list
of choices:
<input type=checkbox NAME="car" VALUE="minivan"> Minivan
<input type=checkbox NAME="car" VALUE="suv"> SUV
<input type=checkbox NAME="car" VALUE="sport"> Sport
What type of car do you own?:
Mnivan
SUV
Sport
In this example, each checkbox has the
same NAME but a different VALUE. The user can choose
from a group of choices. They can choose no choice at
all or as many as they want.
Pre-Selected Checkboxes:
If you want one choice to be pre-selected
when the page is displayed, the value CHECKED can be
added to the input tag. In the example below, the 'Minivan'
choice is checked by default. The user can deselect
it if desired.
<input type=checkbox NAME="car" VALUE="minivan" CHECKED> Minivan
<input type=checkbox NAME="car" VALUE="suv"> SUV
<input type=checkbox NAME="car" VALUE="sport"> Sport
Minivan
SUV
Sport
RADIO
Buttons:
Adding
the type=RADIO to an input tag allows you
to create radio buttons within your form. Radio buttons
are very similar to checkboxes except they allow a user
to choose only one option from a group of options.
<input type="radio" name="color" value="Blue">Blue
<input type="radio" name="color" value="Green">Green
<input type="radio" name="color" value="Red">Red
Blue
Green
Red
Each radio button in a group must be given the same
NAME value using the NAME attribute. The NAME attribute
provides a unique identifier for a logically related
group of fields. Only one choice within a group can
be selected.
Pre
Selected Radio Button:
To have one choice be the default choice,
add the CHECKED attribute to the input
tag:
<input type="radio" name="addme" value="Yes" CHECKED> Yes
<input type="radio" name="addme" value="No"> No
Yes
No
SUBMIT:
The SUBMIT button allows a user to send the information
to the webserver for processing. SUBMIT is added to
the TYPE attribute of the input tag. Example:
<input type="submit">
The text that is written on the submit button can be
changed using the VALUE attribute:
<input type="submi"t VALUE="Yes! Sign Me Up Now!">
RESET:
The RESET button allows a user to clear the input on
a form. RESET is added to the TYPE attribute of the
input tag. Example:
<input type="reset">
The text that is written on the RESET button can be
changed using the VALUE attribute:
<input type="Reset" value="Clear This Form">
IMAGE:
The IMAGE type of the input tag allows
you to add an image to display instead of the default
SUBMIT button. It requires the attribute SRC attribute.
The ALT, WIDTH, and HEIGHT attributes are recommended
for usability. A BORDER tag can also be added if needed.
Example:
When
a user clicks on the graphic above, the user will be
submitting the form's input to the server.
End
of Part 1
Our
next lesson will go through some of the more advanced
tag elements. Until then, practice what you've learned.
The
"One More Chance" box. Click on our sponsors
below for excellent products and services.
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!