Training



Getting It Together

Ok - So now you're a big time HTML programmer. You manage to get a contract writing a web page for a local coffee shop. Now comes the hard part - writing the code. They need a web page that will let their customers purchase coffee over the web. Here's what the page should look like:
Java Joe's

At Java Joe's we serve and sell only the finest of coffee beans.
We understand that you can't get this quality of bean from just any supplier, so we have provided our beans direct to you via the web.

If you want the smoothest caffine high you can get, just fill in the order form below, and soon you'll be dreaming of sunny beaches from your cubicle.


Let's Get Personal:
First Name:
Last Name:
Address:
City
State:
Zip:
Phone Number:


How may we be of service?

I Wanna Buy:
BEANS
GROUNDS


My Favorite Flavor is:
... and I just can't live without lbs of it!



We'll call you within a couple of hours to verify your order and get your credit card number.

Thanks for doing business with us!



Of course, most employers won't be quite that specific about how they want the page to look - they will look to you for imagination and creativity. But once in a while, you'll get a customer that knows exactly what they want, and will bug you forever until they get it.

Now that you've got the basic layout of the page - how do you make it?

Well, first you lay out the text. That's pretty simple. You may ( or may not ) wish to run the text through a word processor first, and do a spell check. After it's spell checked, and you are sure the text says what you want it to say, you have to format it to look the right way. This is done using break, center, alignment, and font tags.

Note that on this page, there are no images. This is a plus, and makes the job a little easier. However, the tricky part is the stupid form! The text boxes in the form are all in a nice neat row, and are surrounded by some kind of colored grid. Oh my gosh! It's a TABLE! A table and a form - interwoven! How are we gonna do that?

It's easier than it looks. Let's build it one table row at a time.

First Name:
We know that we have to make a FORM, and that table is just for looks, so first, we use the < FORM > command.

< FORM >

< /FORM >
That's all good & well, but now we have to put a TABLE inside of the form. The TABLE has width, background color, and in this case, we included a thin border.

< FORM >
< /FORM >


Looks a little thin doesn't it? That's because that TABLE needs a first ROW and some data in it. This is accomplished by the following code:

< FORM >
< /FORM >


 


Now we need to put two columns of TABLE DATA in the row:


< FORM >
< /FORM >
   

Now we fill the first column with the appropriate data:


< FORM >
< /FORM >

First Name:  

Then we fill the second column with the TEXT INPUT box.



< FORM >
< /FORM >

First Name:


Well done grasshopper. This is but the first step of many, for now we must continue the long journey. For our next trick, we have to create the second row, which has to stay part of the same table, which is still part of the same form . So, within the FORM and TABLE tags, we include the second row and data of the table, just like we did the first. Well heck, if we've done it once, we can do it again!



< FORM >
< /FORM >
We continue on in this manner until we have completed the entire table.
Let's Get Personal:
First Name:
Last Name:
Address:
City
State:
Zip:
Phone Number:


Now we make the radio buttons.

I Wanna Buy:
BEANS
GROUNDS


This is easy. We've done this before. Here's the code - not that you need it!


I Wanna Buy:
< input type = "radio" name = "bean" value = "beans" > BEANS
< BR >
< input type = "radio" name = "bean" value = "grounds" > GROUNDS

Make sure that you put this code INSIDE of the < FORM > tags, otherwise the form won't work right. It is also reccomended that for asthetic's sake, you put the radio buttons to the left of the words ( Beans & Grounds in this case ), and put a break between them. This makes for a more pleasing look. You would want to use the same procedure for checkboxes.


Now we add the option selection sections:


... and I just can't live without lbs of it!

This code again is easy, but it also has to remain WITHIN the < FORM > tags. Here's the example code, and you can fill in the extras.

< SELECT >
    < OPTION 1 > Vanilla Hazelnut $3.95 lb < /OPTION >
< /SELECT >
< BR >
... and I just can't live without < SELECT >
< OPTION 6 >1 < /OPTION >
< /SELECT > lbs of it!

Finally, we have to put a submit / reset button option. Piece of cake right?


< input type="submit" >
< input type="reset" >



One important question comes to mind though......

When we first started working with the < FORM > tag, I said that the form POSTED to the web server. How do we know where to post to?

Well, that sort of depends on what you want to do, and what tools you have available to you. The simplest, but most insecure method of posting is simply to have the output go to someone's mail box. This is a pretty easy trick. Just use the following code, and replace the xxx@xxx.com with the actual email address the form is to post to. Keep in mind this method is NOT secure, and NOT recommended for sending of sensitive info like credit card data, etc.

< FORM METHOD="POST" ACTION=mailto:"xxx@xxx.com" >

For a more secure post, you'll want the form to interact with a CGI script - a program that runs on the webserver. Depending on the host you put your website on, most offer a value added package with CGI scripting. You have to get with their system admin and find out what you need to do to work with their CGI service. The method will still be POST, but the ACTION will be a specific address that they give you. Also, their program may look for the data in a specific order, spelling, or capitalization format. Get with your webhosting provider to work out those details.

< FORM METHOD="POST" ACTION="../cgi-bin/form.exe" >

Finally, if you want to forgo all that bogus bull - contact PAYPAL. They have CGI and Shopping cart services that give you everything you need to get started. They even give you the code for the first page, and you can work with it from there.

Good luck and happy selling!

On The Following Indicator...
( GREEN will indicate your current location)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

[ COURSE INDEX ] [ HTML GLOSSARY ] [ HOME ]

Otherwise - please click to visit an advertiser so they know you saw their ad!


This Course was written by Ray Dall © All Rights Reserved.
This page and all its content Copyright, Trademarks, Intellectual Properties
and other legal issues 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006 Ray Dall.
All Rights Reserved.
And for what it's worth... this page was last updated HexDate 01-11--7D1

VISITORS:
Add Me!