FORM 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. 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
INPUTS TYPES | | | 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. |