Webpage Workshop: Home » HTML » Basic forms

Basic forms

Forms are a great way of adding interactivity to your site, not only can they be used to dynamically generate pages but they are also the gateway between your visitors and you. Think of the number of different forms that you see everytime you visit a site; there's one for a search engine, maybe one to sign up to a newsletter and normally one for you to contact the webmaster. If you want your visitors to contact you then you need a form!

The first thing you need to know about forms is that you need a program to handle the form after you click the submit button. This is normally a CGI program written in Perl; see The CGI Resource Index for more details. The example below shows a basic form and how to indicate the program you use to handle it:

<form method="post" action="form.cgi">
  <div>
    Form contents go here
  </div>
</form>

In the example code above, the action attribute indicates the form processor, which in this case is called "form.cgi". The method tells the browser how to submit the form; in this case we used the "post" method, which is the most common one. The "post" method sends the form data hidden from view in the HTTP Headers (don't worry about what this means) whereas the other method, the "get" method, sends the data as part of the address, eg. form.cgi?name=Fred%20Jones.

Most forms also have a submit and reset button, although some only have the submit button. The example below illustrates how this is achieved:

<form method="post" action="form.cgi">
  <div>
    <input type="submit" value="Send">
    <input type="reset" value="Clear">
  </div>
</form>

The code above shows the two different buttons that are generally part of a form, the value attribute sets the text that is displayed on the button and the type attriute is the one that states what the button actually does. The "submit" button sends the form, and the "reset" button clears the form.

In the next tutorial you will learn how to build upon the basic form that we have made here by adding text fields.

<< Previous page