 |
WEB DESIGN SKILLSModule Study Guide
|
Session 14
Forms
On this page:
Forms
Forms are a common feature of many web sites. Basically, a form is an element which allows the end user to enter data in a variety of different ways and submit this to the server.
First we will look at the types of data entry available and then we'll go on to see how we can deal with the information we get back.
Text entry
The simplest type of data entry is a text box, which looks like this:
As a designer, you can control the width and height of the box in terms of number of characters and number of lines. The user can enter in anything they want.
Tick boxes
Instead of (or as well as) freeform entry, you might decide that you want to ask your users some 'yes/no' questions. You can do this with a series of tick boxes, or check boxes:
Although these questions look related, they are in fact entirely separate, and the user is free to tick or leave unticked as many boxes as they wish.
Radio buttons
In contrast, radio buttons always appear as a group, and the user must choose one only:
Drop-down lists
These actually give you back the same sort of information as radio buttons, but in a different format. They are often used when there are a larger number of options, to avoid cluttering up the page:
Action buttons
Most forms only have two action buttons:
whose actions are fairly self-explanatory. You can change the wording on the buttons if you like, but why bother?
All these elements (and others) are available on Dreamweaver under the 'Forms' button (click on the far left of the 'Insert' toolbar or use the 'Insert > Form' menu). Remember to include all the items inside a 'form', so that the action buttons will operate on all the data.
Handling the data
Now here's the problem. The whole point of having a form on your web page is for your visitors to send you back information. So obviously you want to collect this data and do something with it.
Each form has an 'action' attribute which tells the web server what to do
with the data. In theory you can just put 'mailto:me@my_email_address.co.uk' in
here, and the server should email the form data to you. Unfortunately this
rarely works in practice, and is completely at the mercy of the user's browser.
Some browsers will handle this properly, some just open up a blank email composition
window, and some do nothing at all!
The recommended way to do it is to specify a program which runs on the server and is set up to handle the incoming data. To do this you have to have access to a server which allows you to run programs on it - many don't. And even if you do find one, you need to be skilled enough to write a program to handle the data, so it's not a task for the novice web designer.
Freedback
However, help is at hand. A company called Freedback operate a system which allows you to create your own forms, which when filled in by your viewers will send the data back to them (i.e. to Freedback). They process it and send you back an email. It's a free service. They make their money by ads which appear on the user's computer after they click on the 'Submit' button. If you want to try them they're at:
(NB: There are other providers offering similar services. I just picked this one because I have used it myself and I know it works!)
Exercises
- Think up a form which will collect the kind of information you might need from the viewers of your site.
- Use Dreamweaver's form-building features to construct a suitable form on a new page.
- Test the page on a browser to see if all the elements work properly (apart from 'submit')
- If you want a fully-working form, sign up to Freedback (or find another provider) and make a 'real' form.
Links
- http://freedback.com - Freedback
- http://www.formsite.com/ - Another similar service
