JavaScript Pop-up windows.

JavaScript pop-up windows, who isn't using them? Who uses them correctly enough to achieve the Triple AAA rating? I tried and tried but could not get past a single A rating on any page that had a pop-up window. Not very satisfying for me. Here's where "The Hammer" went to work. I was running my pages through the Accessibility Validator at the University of Toronto because it actually provides a very detailed solution for most errors. When it came to explaining the "event handler" solution I was left almost totally in the dark. I pecked away at it for about a week before the solution came to me out of the blue. The validator was telling me that if I was using the "onclick" trigger that I had to use the "onkeypress" trigger as well. The validator was directing me to add a redundant command as well. It usually gives you an example of what will "pass", but not in this case. Well, I tried just about every combination that I could think of including "nesting" the "onkeypress" command into the original line of JavaScript. Nothing was working. Then came the inspiration. I wrote a completely redundant command inline with the original "onclick" command. A working example of what I am talking about will look like this;

This works wonderfully and upon closer inspection actually makes sense. I keep referring to things that "make sense" and things that "don't make sense". This is actually a very important issue for me. It is easier for me to maintain a high level of consistency if it "makes sense". It's the math and science guy in me. I will only do things, that "don't make sense" , for a short time before I begin to pick it apart and re-engineer it to the point it makes sense to me. Forms are a good example of this. A complex issue, yes or no? Not really. Coming up next in my tutorial.

Forms, Achieving the Triple AAA rating easily.

I was afraid of forms initially until I had to have one on one of my websites and decided to take a crash-course in ASP Programming. It took me about two weeks to come up with a simple form that actually worked and "returned results". WOW, was I thrilled. The majority of the script actually consists of Visual Basic programming with the A.S.P. handling of the information gathered. A form is basically just a bunch of html organized to give you a pre-determined "look". Most point and click html editors will give you the basic "look" but then you have to decide how to manipulate and transfer the information gathered through the form. This is about as far as I want to go into the "blood and guts" of the form. You can get your hands on a working form without having to know any programming from places like Bravenet.com. This is where the majority of mainstream webmasters appear to be doing business. They work! If you should happen to be like me and wish to invent and control everything you can get your hands on these next lines are for you. Who knows, after I de-mystify it a little you may want to dabble in form making yourself. The form consists of a predetermined amount of text boxes(input fields), text areas, option buttons, check boxes or dropdown menus. It's starting to sound tricky but actually it's still a piece of cake.

Organization and consistency is the key.
After you build your form in a table you will need to make some minor alterations.
The first thing you will need to address will be the "hidden" inputs. This is achieved easily with some attributes. A working example will look like this:

Comments are always a good thing especially in forms. This particular snippet is giving us the option to require these particular values that need input or the A.S.P. script will kick it back to the user and ask them to finish filling in the missing information / fields. The address attributes are all that are needed to make this code validate.

All the visible text ,the text that directs the user to populate the input stuff, will need to transformed into labels. A working example of what I am referring to will look like this:

I have included some extra mark-up code just to give you a perspective on how and where the label attribute is used. As you can see you can style the label text to your hearts content. The code that follows will now make perfect sense. It will look like this:

It is important that once you identify an attribute like "firstname" that you continue to call it the same thing as long as you are dealing with things having to do with firstname. Not only is it easier to follow in your code but the validator will love it as well. I added the float:left command to make sure that there is no mistaking what I am expecting to happen inside of that field. Now, if you have been paying close attention to the last "code snippet" you will notice that I have set the "fieldset" border to 0px I then went ahead and styled the input border to 1px. The reason that I did this was because that using the "fieldset" border brings with it some other values that I didn't want to "inherit". I like to "keep - it - simple". It is easier for me just to style the input field and be done with it.

Next we will look at the text area. This is a little more complex, but not much. You have to add another attribute that will begin to look redundant but it still "makes sense". A working example will look like this:

In the input fields you will notice that you have to add the "value=" attribute. This is important! This is the text that you will see inside of your input fields sort of redirecting the user to input what the "label" is asking for. As far as the text area is concerned the visible text that you will add, to be seen in the text area itself is generally just added , without a "value=" attribute, between the opening and closing of the "textarea" attribute. You can not validate your mark-up or any level of accessibility without this. The attributes of id=information and name=information really means that you are covering all of your bases. It would be impossible for any browser or validator to misinterpret your intentions due to semantics. I decided to cancel the border in the text area on a whim, I simply decided I liked the way it looked without a border.
As with any table or box you can add a background image or the color of your choice to dress it up. You can style the text areas, the text boxes and the buttons any way that pleases you. The sky is the limit.

Next we will examining more JavaScripts on the next page of this tutorial.