10 COMMANDMENTS OF WEBSITE ACCESSIBILITY
We keep hearing about something called 'accessibility' for websites. So what is it all about huh? Well, it is all about webmasters making sure that they give any disabled visitors who come to their site an equivalent experience to that which a...
Are We Blind To Banner Ads?
Do expensive, flashy banner ads really work? Studies suggest advertisers attempting to draw traffic through banner ads could be wasting their time and their money.
Many advertisers are putting a great deal of money into the placement of...
Bluetooth: Personal Wireless Networking
If you've got a wireless network for your computers already,
well, you might get a bit excited about what I'm going to say
next. How would you feel if your PDA, your mobile phone, your
mp3 player and almost everything else you connect to...
How Web Design Can Affect Search Engine Rankings
Uniquely built web sites can create unique issues when promoting your site on the search engines. From a basic 3 page brochure site, to a corporate site with hundreds of dynamically generated pages, every web site needs to have certain design...
Maintain Your Site with Page Include Files
Maintain Your Site with Page Include Files by Larry (Momp) Poch We all know how web sites seem to take on a life of their own. As the number of pages increases maintaining the site can be a time consuming task...! The use of "Page Include" files...
PHP & Templates
Much in the same way PHP can display dynamically generated content , PHP can change the whole look of your site. Through a template system and simple variable that sets a session containing the user's preferred template, you can make your site...
Separating Presentation, Content and Structure
The overall quality of the website quantifies its worth. It must not only be unique, flashy or overwhelming, it should also be functional, entertaining. It is not only there for display. Its there for a purpose and it should serve that purpose....
Starting a New SEO Services Business
If you have ever considered starting a new SEO service company, there are several steps you can take that will get things moving in the right direction. I myself started a company this past year that is already realizing great results. Not only will...
Web Accessibility Myths
With more and more countries around the world passing laws about blind and disabled access to the Internet (including the Disability Discrimination Act in the UK), web accessibility has been thrown into the spotlight of the online community. This...
XHTML - Kicking And Screaming Into The Future
XHTML, the standard, was first released back in 2000. Roughly five years later we begin to see major websites revised to use this standard. Even the favorite whipping boy of standards-compliance punditry, Microsoft, presents their primary homepages,...
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
Now we have each option groups surrounded by a tag. This will allow us to change their visibility with javascript. I have put tags around the options, and added a submit button. Note: when adding tags inside a table, make sure they are contained within a cell. Something like < d>< r> < able> will not work for the same reason that adding text outside of cells inside a table doesn't work. If the stuff inside the tag is showing up, tables may be your problem. To fix this, either don't use tables, or create an entire seperate table for the information inside the tag. Here is the code:
Flower Order Form
We used css to hide the tags. The next step is to use javascript to show and hide each of the cells depending on what is selected in the drop down menu. We will start out by making a javascript function, then I will explain the code and link it up with the drop down menu. Javascript
We are going to create a function that will show and hide the cells. There are 3 things we need to pass onto the script: the number of total options, the name prefix for the tags, and the number of options(to end the loop). Here is the script that I wrote:
Add this code inside the section of your page. Now we have one less step; to call the function from the drop down box. Here is the code to do that:
What this does is when the value is change, it will pass on the value, the name prefix of the cells, and the number of cells. In the first part, make sure the getElementById('numflowers') matches the 'id' attribute in the