weballey logo
left forms - form backnext right
homesearchsite mape-mail
< form >
e-mail form
      The form tag has several attributes. The main is ACTION, which determines what will be done with the contents of the form. Another is METHOD, which determines how a form is submitted. Also worth mentioning is the TARGET attribute. This is used if you want to open the results in another frame or window.

<FORM ACTION="forms.cgi">

    The ACTION attribute tels the browser what to do with the data. Most forms will communicate their data to a CGI program. The web server will pass the data on to a program running on the server, apart from the actual webserver. Often this will be some kind of database software. The web is actually used as an interface to the database software. For now I will tell you how to create a simple e-mail form.

<FORM ACTION="mailto:foo@bar.com">

    If your browser accepts this action, it will send the contents of the form to the specified e-mail url, in a readable format. Be aware however, that several browsers do not seem to support this feature. On the next page you will find the complete code for such a form, and an example of how that form will look.


    The METHOD attribute tells the browser HOW to submit the form. The default method is GET. This is similar to how a web browser normally gets a webpage from an url. The GET method is used by most search engines, have a look at the url next time you use one.The result will be something like this.


URL encoding
    This url may look very cryptic at first glance. But it's hardly rocket science. Let's split things up a bit. The first part before the question mark is a normal url. The question mark separates the ducument url from the data. After that you see two name/value pairs, separated by an ampersand (&). The name/value pairs contain what you submitted with the form. The names are defined in the form tags, like input and textarea. What you filled out in the form is in the corresponding values. So you see there's nothing to it.
    Some characters will be translated to their HEX values. You will often see codes like: %2E etc. A space will be converted to a plus sign (+). This process is called URL encoding. The data are encoded to an url, with safe characters. Some characters would otherwise interfere with the working of the url. A space for example would break the url, only transmit the part of the data left to the space. The corresponding cgi program will translate the values back to their original form.

<FORM ENCTYPE="text/plain">

    A form is normally sent url-encoded. If you specify an encode type, the form data will be sent more or less unencoded. The result of the form will be more readable, if sent as an e-mail form, like the one on the next page. Only use this one in a mailto: form however, a cgi script may have trouble decoding this. Also older browsers may not understand this attribute.


    A bit different is the method POST. In this case the url will just be what you specified in the ACTION. The data are transferred seperately, after calling the url. This will result in a cleaner url in the location box. You will see no data there, just a basic url. This is the preferred method with programmers. It is also necessary to make our little e-mail form work properly.

    One final puzzle for you. What happens if you don't specify any attributes? Just a plain <FORM> tag? Well, the form will be submitted to itself. What's the use of that, you might ask. Forms are often generated by a program, or "on-the-fly". This program often also handles the output of the form. If there are errors, the form can be displayed again, with error messages at the appropriate locations.

<FORM ACTION="http://www.weballey.net/forms/forms.cgi">

Testing your own forms
    You can test your own forms by using the URL above. Most forms in this tutorial are connected to a simple cgi program (forms.cgi), that just renders the submitted data. You will also see all data that is sent by default. You may use it to test forms you created with this tutorial.

left Copyright © Gerben Hoekstra - All rights reserved backnext right