Free HTML Tutorials   •   CSS   •   Popups tutorial   •   Frames Tutorials   •   Forms Tutorials   •   Beginners HTML Tutorials   • Advanced HTML Tutorials   • JavaScripts   • Free Web Page Tutorials   •   Free Downloads
OzWebLogo Advanced Section

FORMS 3 - EXAMPLES
 
 

FORM EXAMPLE

You can make your form as plain or as fancy as you like. A coloured background is a good idea as it shows up all the elements more clearly. If you use a background graphic make sure it is not too fussy as it may obscure parts of the form.

NOTE. If you want to create a printable form that people can fill in and post, keep it simple and stick to black and white. It is annoying, and a waste of expensive printer ink, to have to print a long, brightly coloured form.

You can put your form inside a plain coloured table, and use an image as the body background. You could also use it inside a frame page. The only limit is your imagination and ability.

Let's have another look at  Rosie Brown's form which uses elements we have covered in these lessons.

With this form you can try entering some information and then click the "Clear Form" button.

FORM DESIGN and TESTING

I AM REPEATING THIS --- You must contact your ISP (Internet Service Provider) or host and ask them for full details of how to get a form onto their server. Your form will not work if you do not have the correct code at the beginning. I cannot give you the code.

Try some experiments using different colours and backgrounds to make your forms more appealing. Try to make them neat with the leading edges of input boxes lined up and font faces that go well together.

Later in this tutorial you will come across Cascading Style Sheets (CSS). Once you are familiar with the concepts here's a way to make your buttons a bit more cool. On the previous page was the code for the SUBMIT button, like this:

    <INPUT TYPE="submit" VALUE="Submit Form">
The default background is gray and you cannnot change that using HTML. BUT using CSS coding you can change the background and text to any colour you want. So let's do a red background with white text and another with a black background with yellow text. Here is the code (the extra CSS code is in bold):
    <INPUT TYPE="SUBMIT" VALUE="Submit Form" style="font:bold 10pt arial; color:#FFFFFF; background:#FF0000">
    <INPUT TYPE="SUBMIT" VALUE="Submit Form" style="font:bold 10pt verdana; color:#FECE3F; background:#000000">

Here is the result:       

Use whatever colours will suit your form.

Moving on - Don't be mean with your input box sizes - they will look best if there is not too much variation in size, so try make them all as big as the largest. If you feel the need for small boxes for Post or Zipcodes or phone numbers, try running them on the same line.

Once you have posted your form to your website, try it out. Pretend you are a respondent and fill out the form. Is it easy to use? Would you feel comfortable answering the questions or giving the required information?

Once completed, send the form. If you don't receive a “Thank You” or an email response you will have to go over everything very carefully to see what went wrong.

When you get a response, see if it is a format that makes sense to you. What may appear clear on the form could be obscure in the email. If so, go back and make the necessary alterations.

If you want to keep a record of responses, create a new sub-folder in the relevant folder to keep them in. Reply to your correspondents as soon as you reasonably can. Using the “reply-to” option will make this easier.


Next:  Creating Frames

Advanced Index

Help
Copyright ©1998-2008 OzWebWeaver.