Choosing A Color Scheme
When you begin the design of your Web site, one of the first things you need to do is decide on a color scheme. Although choosing colors seems like a relatively easy proposition, it's not easy at all. In fact, it's hard. One of the pluses we have...
Finally, Someone Made The Web Design Process Easy To Understand
The best thing that can be done for web design is to leave it to the designers! That is what a lot of folks particularly internet marketers like me believe about the web design process.
When you visit a large web design company the chances...
The Problem With Automated Accessibility Testing Tools
An automated accessibility tool is a piece of software which can test a web page, or even an entire website, for accessibility. Automated accessibility tools are useful because they can save you a huge amount of time. Don't want to check images...
Web Source Web Design Tips - Using META Tags to Prevent Search Engine Indexing
Meta tags are used to give detailed instructions, in regard to a web page, to the Search Engines and browsers. Many times, you may have a web page that you don't want the Search Engines to index. To help with this problem, add one of the following...
What makes a "Real" CMS(Content Management System) "Really Good" and which System is right for me?
As the market floods with CMS solutions offered by a hundred different companies, one may start thinking "How in the world am I going to find a CMS that will firstly gives me what I want and need now and secondly will that system be able to provide...
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.
