Search
Recommended Sites
Related Links






Valid XHTML 1.0 Transitional

Valid CSS!
   

Informative Articles

Article Submitter Pro Review
If you have ever submitted articles to gain website popularity, then you know how long the pain-staking process takes. Well, there is a new automatic article submitting software that was just released last week called Article Submitter Pro. This...

Building websites using web templates
Gone are the days when you had to rely on a web-designer to design your websites. New technologies with innovative ideas have brought out a new variant to this trend in the form of ready to use website templates. So what are web templates? Well,...

Ebook Design (HTML)
When designing an HTML compiled ebook, you must create an HTML document (web page) for each page within your ebook. These pages should include all of the following: Introduction - You can create an image that compliments the theme of your ebook,...

Web Design and Development: The Right Tools for the Right Job
Web Design and Development: The Right Tools for the Right Job As any webmaster knows, designing and developing a website can be a daunting proposition. There are millions of websites out there to compete with, and whether your site's...

Web Site Design By Using A Template
If you are like may others on the internet, then you would like to have a web site of your own. The problem is, you don't know how to design a web site, and you can't afford to pay a web site designer to design a new site for you. So how do you...

 
Interactive Forms

Why interactive forms?

Forms are easy enough to create when they are simple, like
search boxes. But what if you need them to be complex? How
about changing the forms based on input by the viewer? This
is where interactive forms using Javascript and HTML can
help. I'll use a simple example on how interactive forms can
be useful.

The problem

I am going to use a business project as an example to teach
interactive forms. Imagine that we are creating a ordering
system for flowers. We would like the customer to be able to
order a bouquet of flowers. The customer can choose to have
any number of flowers in the bouqet from 1 to 6. For each
flower, the customer can choose a type of flower, and there
are 3 different kinds of flowers. Now imagine all these
options as a regular form. There would be 18 options to
choose from, even if you only wanted one flower! This would
be ugly! In this tutorial we will learn how we can show and
hide form elements depending on the input by the customer.
Now let's get started!

Creating the interactive form
-HTML

We are going to create a page where you can enter the
information for ordering flowers. We've decided on having a
drop down menu to select the number of flowers, and then for
the number selected, display that number of options to
choose the type of flower. We'll start by creating the HTML
forms. First we will write the html code for the form.



This will create a menu.

Next we need to create the form where the customer will
choose the type of flower they would like. We will let them
choose between a red rose, a white rose, and a yellow rose.
I am going to use radio buttons for the selection. Here is
the code:

Red

White

Yellow


For this tutorial, I assume you have a basic knowledge of
HTML. All of these pages still need mandatory tags, but I
left them out because of the size they would take up. Notice
how I made all the options the same name. This is so they
are grouped together, and only one option can be choosen.

This is what it will look like: 0 Red 0 White 0 Yellow

Duplicate this code 6 times, for each of the flower. But
every time you see "color1", change that to a different name
so they are all seperate. I will use "color1", "color2",
"color3", and so on.

Now we need to put all of this together into an ordering
form. But we need to add something so that the forms can
disappear. We will add tags around each of the flower
type selection rows. Enter the following code around each of
the groups of options. Make sure that for each one, you
label the id tag for the differently. For example, the
first group will start with will start with IMPORTANT. When we pass variables onto the script, the only
thing that should change between the name of the tags
should be the number. This is because we will use a loop to
go through all the numbers. We will pass through the name of
the tags to the javascript script, and the script will
add the numbers.


Choose type of flower 1:


Red

White
name="color1" value="yellow">Yellow

Sign up for PayPal and start accepting credit card payments instantly.