to home page

BWRS
SEARCH

HOMETUTORIALSLINKSFORUMGLOSSARYNEWS
 

FORM PROPERTIES

Properties

If you've been folloing things in sequence you should know the basics of the <input> tag ifor forms (sometimes called form fields)

However it's all very good creating a nice set of buttons and text entries but what do you do with the data gathered?

Well that where the <form> tag comes in.

It takes the info collected and sends it on.

Now as mentioned in the introduction the data can simply trigger an event, be sent as an e-mail or be sent to a form handler for processing

Okay lets get started with how <form> tags operate

Let's go back and look at our earlier example

<form method="get"
action="http://www.fluffbucket.com/" target="_blank">
<input type="submit" name="button"
value="Basic Web Resources Site">
</form>

 

Okay you know what you're up to with the <input> tags, but what about the <form> tags ?

At the simplest level it defines the area covered by form (between <form> & </form>)

However it does so much more. The <form> tag also determines where & how the data is sent.

The action attribute determines the URL of application where the data is sent & processed. This will often be a form hander such as a CGI script (we've cheated a bit here by making a webpage URL the handler, the action here is to effectively open the URL)

The other must have attribute is the method attribute. This defines how the form sends data. There are 2 values - GET & POST.

With the POST method the form first contacts the form handler defined in action. Once contact is made it then sends the data.

With GET the data is just sent in a single step.

The choice of these is complex. The W3C recommends the use of POST for forms, but others recommend the use of GET for short forms and for those inexperienced in using form handlers, whilst longer forms are more suited to the POST method (1). However when starting out, you'll probably be using a provided form handler (e.g. the scripts in the CGI bin your host provides you with) and usually will get instructed what method is best suited.

We exploit the GET method here to pull the webpage up.

There are other common attributes you can add to the <form>.

Here are some of the more useful.back to top

As in the above example, you can add the target attribute (for a reminder on this see our frames section) so that the action of the form handler can be opened in a designted frame or window.

The enctype attibute is commonly added too. It defines in what form the data is sent. If you don't set this, the default value is enctype="application/x-www-form-encoded" (known as the internet media type).
This converts any spaces in the data into +(plus) signs and replaces any linebreaks from text area inputs with %0D%0A. If more than one value is used the ampersand (&) seperates them out.

Now this ain't a problem for anyone with a good knowledge of setting up server scripts but when starting out if you get data in this form it can be a bit daunting.

e.g.

name=Joe+bloggs&address=10+anyswhere+street%0D%0A
myarea%0D%0ANew+Town,%0D%0AMy+Country

Another value often used is enctype="text/plain" which sends the data on in a style more easier on the eye

e.g.

name=Joe Bloggs
address=10 Anywhere Street
email=joe.bloggs@hisserver.net

Okay lets get you to put all you've learned into action

First try to rewrite the above form so that instead of opening an webpage it opens up a blank email (clue remember mailto:) Like this button below

The answer is at the bottom

Now we'll move onto a complete comments/guestbook form

back to top

INPUTS
TYPES

back to input typesBasic comments form

BASIC COMMENTS/
FEEBACK FORM

(1) C. Musciano and B. Kennedy
Chapter 10: Forms
HTML Definative Guide, 3rd Edition
1998 Publisher O'Reilly and Associates

 

This page © 2002 A.Duncan BWRS

Answer

<form method="get" action="mailto:your.email@yourserver.com">
<input type="submit" name="submit"
value="email me">
</form>

Obviously you change the email address and name & value attributes as you need.