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.
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.
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:
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!
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.
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.
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:
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!
Tired of paying others to
install your scripts for you?