Now that we’ve covered tables and most of the elements that can be used with them, the next major step for most users learning HTML are forms. Forms are actually very easy to setup once a basic understanding of them is achieved, they are very similar to tables.

The first things we must look at with forms are how to properly open them. Forms can utilize many different “actions” for sending the information gathered and many web hosts will provide free scripts and a cgi-bin to properly run them. In these examples we’re simply going to use the “mailto” action to send all the information gathered to an email address. So let’s take a look at an example opening for a form.

Code Example

<FORM METHOD=”Post” ACTION=”mailto:youremail@here.com”>

We basically stated three things with this one line of HTML code. We told the browser that a form was starting so it could properly phrase all the code, then we told it that we’ll be posting the information gathered and to post it to the email address we specified. This is just the start of our form this will let the browser know a form is starting and how to handle the form properly, now we get to input all the proper fields for gathering all the information.

The first step to a good form is to decide what information is to be gathered. Let’s say we’re making a simple contact form for a business to gather information from their viewers and maybe a place for them to ask questions. So we’ll start by deciding what information we’d like to ask the viewer, the best way to do this is to make a list of all the information and then we’ll move on from there.

Information to Gather

• Name
• Company
• Contact Name
• Contact Number
• E-Mail Address
• Questions & Comments

Now that we have all of the information we’d like to gather, we can then decide which type of field to use to gather the information. There are five different fields that can be used to gather information, they are; text, text area, the ratio button, the check box, and the pop up box. All of these can be used to gather information and each are used for certain things. Let’s take a look at an example for each and how they each will look, then we can decide which to use for our form.

We’ll simply list the name of the field and then show an example of the field afterwards.

Text

Text Area

Ratio Button

Check Box

Pop Up Box

With the above examples we’re able to see how each of the fields looks and from them we can choose the best for each section of information we need to gather. So let’s take a look at each bit of information we need to gather and then decide which box would work best to gather the information.

Name

This will be the name of the user filling out the form and names aren’t too big. So a simple text field would work perfectly for this part of the form.

Company

Once again this isn’t very large so we’ll use the text field once again here.

Contact Name & Contact Number

These are similar to the name and company portion of the form, so we’ll use simple text forms for them also.

E-Mail Address

This is a small amount of information also, so we’ll use the text field here also.

Questions & Comments

This field is probable going to need to be large, as users filling them out will be asking questions or filling in comments, so we’ll use the text field for this one to properly gather the information.

Notice we didn’t use Ratio Buttons, Check Boxes, or even a Pop Up Box, this is ok and they can be used in other forms we’ll make later.