Beginning HTML - Home
Introduction - What is HTML, What it can do, what you'll need, etc. The Basics - First steps in HTML. Moving On - Further concepts. Advanced - More advanced ways to use HTML. Glossary - Explanation of terms used in this site HTML Tag and attribute reference - look up the most popular tags and their common attributes for reference
Square Advanced
square Forms (Part One)
Square Forms (Part Two)
Square Frames (Part One)
Square Frames (Part Two)
Square Entities
Square Meta tags
Square Search engines
Square Publishing
Square Conclusion
 
What are forms?
Parts of a form
How are forms dealt with once submitted?
Creating our first form using buttons and text boxes

What are forms?

Forms are parts of a page that allow the user to enter information, or to interact with the site in other ways. For example, the drop-down menus at the top of this page are part of a form. Forms are often used to collate information from the user, for example you would fill out a form when 'signing' a guestbook. Another example of a form would be the part of an e-commerce site where you entered your personal and credit card details to make an online purchase.

Parts of a form

Forms can contain a number of features, using many different tags. Here are the main ones -

<select> - which makes 'drop-down' boxes from which the user can make a choice. -


<input>, which, using the type attribute, can create -

A button -



A text box, in which the user can enter information -



A submit button, which, when clicked, submits the contents of the form to the server for processing -



A reset button, which, when clicked, clears and resets the contents of the form -



A checkbox, which the user can tick or untick -



And radio boxes, which you can group together so the user can choose an option -

Option One Option Two

The <textarea> tag, for making multiline text inputs -


Forms can also contain images and text- not just the actual components.
How are forms dealt with once submitted?

When a form is completed, and submitted by the user, the contents, or values of the form are then sent to the server for processing. The information is sent to a CGI - Common Gateway Interface. A program on the server, often written in a programming language called Perl then deals with the information accordingly. The address, or URL of the program would be specified using the action attribute of the <form> tag, for example -
<form action="http://www.yoursite.com/cgi-bin/email.cgi"
If you have uploaded your site to the internet, your web-host may include some CGI programs as standard, perhaps to accept and convert e-mails from a form. They would then give you the URL or address to 'send' the form to.
Perl is well outside the scope of this tutorial. We will, however, examine how to design forms and assign form components values using HTML.
Not all forms are used in this way. Forms can also be used for simpler reasons, such as doing things when a button is pressed, e.g. -
or for using select/dropdown menus to navigate a site (like the top of this page).

Creating our first form using buttons and text boxes

We'll now make a simple form, to collate information about the user. To do this we'll use the following tags - <form> to begin the form (and its closing tag to end it);
<input> to create both the buttons and text inputs.
Let's begin by starting up Notepad. We'll create the basic framework of the document, and pad it out as we go. Begin by entering the following code -
<html>
<head>
<title>A simple form</title>
</head>
<body>
<font size="4">Please enter your details</font>
<form>
</form>
</body>
</html>

Save this away as forms.html. We've now got a basic page, with an empty form ready for some content. Now let's create some text inputs for the user to enter -
  1. Their first name;
  2. Their surname;
  3. Their e-mail address;
  4. Their favourite web-site;
To make a text input section, we use the <input> tag. This tag can be used to create many different things (as we saw above), so we use the type attribute to tell the browser what we want. In this case, we want to set the value of the type attribute to text, like this -
<input type="text">
We'll need four of these, to get the four different bits of information we're after. Let's add the code now -
<html>
<head>
<title>A simple form</title>
</head>
<body>
<font size="4">Please enter your details</font>
<form>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</form>
</body>
</html>

Save this away. Now start Explorer (or another browser) and open and view the page. This should appear like this.
Now our page has four boxes where the user can type in information. Now we need to let the user know what each box is for. To do this, all we need to do is add some text before the textbox. We also need to make each box appear on a different line, so we'll add a linebreak after each one, using the <br> tag. Modify your code so it reads like this -
<html>
<head>
<title>A simple form</title>
</head>
<body>
<font size="4">Please enter your details</font>
<form>
Enter your first name: <input type="text">
<br>
Enter your surname: <input type="text">
<br>
Enter your e-mail address: <input type="text">
<br>
Enter the address of your favorite web-site: <input type="text">
</form>
</body>
</html>

Save the file and again view it in your browser. It should now look like this.
Now we need to allow the user to reset and more importantly, submit the form. To do this, we'll again use the <input> tag, but we'll use the type attribute and set it to reset and submit respectively. Change the code of forms.html so it looks like this -
<html>
<head>
<title>A simple form</title>
</head>
<body>
<font size="4">Please enter your details</font>
<form>
Enter your first name: <input type="text">
<br>
Enter your surname: <input type="text">
<br>
Enter your e-mail address: <input type="text">
<br>
Enter the address of your favorite web-site: <input type="text">
<br>
<input type="reset">
<br>
<input type="submit">
</form>
</body>
</html>

Again, save it away and then view it in your browser. It should now appear like this. Try typing in some text in the boxes and then clicking 'reset' - the text is then cleared (reset). The submit button won't do anything because we've not included an action attribute in the <form> tag.

What we need to add now is the name attribute to the input items. If this was a 'real' form and it was being submitted to a server, it would allow the server to process each bit of information according to the input's name. If we didn't include this attribute, the server won't have any way of identifying and sorting the information. Let's take our code and add the name attributes to it -
<html>
<head>
<title>A simple form</title>
</head>
<body>
<font size="4">Please enter your details</font>
<form>
Enter your first name: <input type="text" name="firstName">
<br>
Enter your surname: <input type="text" name="surname">
<br>
Enter your e-mail address: <input type="text name="email">
<br>
Enter the address of your favorite web-site: <input type="text" name="favorite">
<br>
<input type="reset">
<br>
<input type="submit">
</form>
</body>
</html>

We've covered a lot of content, and by now you should hopefully understand the basics of forms. In the next section we'll be making another form, using some more form components.

TopTop of page - BackBack to Advanced - Next - Forms (Part Two)Next

Introduction - The Basics - Moving On - Advanced - Glossary - Reference