HTML 009 - Forms
PDF

Forms are used on websites in order to allow the user to send feedback to the owners or to representatives of the website. For my website I have a form for contacting me as well as forms for many of my shop items. All of which are meant to help inform me what people want so I can act upon it. For this tutorial I will go over the creation of a basic contact form, similar to the one that you see on my site.

For most Email forms there is a spot where a user can input their Email address, a subject, and their message. For many of the types of form input you use the input tags: <input >. Just like the image tags, input tags do not have a separate closing tag. Another rule to follow is that anything within a form must be between the <form></form> tags. I will go over those tags first. Below you can see an example of the form tags.

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<form>
</form>
</body>
</html>

Within the form tags, you will use one of the many types of form inputs. The first one that we will use is the text field. To do this we will use the <input /> /> tag with the type="" attribute. To make a text field we enter 'text' as our type.

<form>
<input type="text" />
</form>

If you test this out in your browser you should see a text field that you can type into. This is not all you can do with your text field. For one, you can change the size of your text field using the size attribute. In the size attribute you can only enter a number. Below I have labeled our text field and resized the field.

<form>
Email: <input type="text" size="30" />
</form>

If you tested it out in your browser your text field should have changed size and added the text 'E-mail:' before the text field. This is all it takes to create a text field. Now let's move on to the part of the form that you enter your message into. This is called a text area. Rather that using the input tag we will use <textarea></textarea> tags. You can resize the text area as well using the rows (height) and cols (width) attributes. You can see our form coding below:

<form>
Email: <input type="text" size="30" /><br />
Message: <br />
<textarea cols="30" rows="4"></textarea>
</form>

In order to make our forms to start on separate lines we must use the <br /> tag. In this case I have labeled the textarea as 'Message:'. If you test out your HTML page you should see that we have a place for an e-mail and a message. Now we have to have a way for a person to submit the message. For that we will use the input tag but instead of using 'text' defining the type attribute you will use 'submit' instead.

<form>
Email: <input type="text" size="30" /><br />
Message: <br />
<textarea cols="30" rows="4"></textarea>
<input type="submit" />
</form>

With this you will see the submit button at the bottom. As always, we can change our button a bit. To change what the button says we just add the value attribute. You can see an example below:

<input type="submit" value="Send Your Message!"/>

Now rather that putting in the browsers default text your button will say "Send Your Message!", or whatever you put as your value. Even now your form is not complete, hitting the submit button will do absolutely nothing. Unfortunately without the knowledge of javascript or PHP or something similar you cannot really do anything with forms. So then you ask: Why should I learn HTML forms?

Well, first off when you do learn how to use forms with one of these languages you won't have to go back and learn how to make the forms. Also, if you know someone who can make forms work you can design the form yourself. All of the work done to make the form work is done under the hood, so to speak. So if you still want to see some other type of form input they are listed below.

Checkbox and Radio Buttons

Two other types of form inputs are the checkbox and the radio buttons. Both of these work in a very similar way. To make these work you must have multiple inputs with the same name attribute. Here is an example:

<form> <input type="checkbox" name="food" /> Pizza <br />
<input type="checkbox" name="food" /> Popcorn <br />
<input type="checkbox" name="food" /> Chicken Wings <br />
<input type="checkbox" name="food" /> Tofu Burgers <br />
</form>

Go ahead and test this out in your browser. You should see the four different choices. With checkboxes you can check more than one box. But if you only want one selection all you have to do is change all of the type attributes to radio.

<form> <input type="radio" name="food" /> Pizza <br />
<input type="radio" name="food" /> Popcorn <br />
<input type="radio" name="food" /> Chicken Wings <br />
<input type="radio" name="food" /> Tofu Burgers <br />
</form>

If you test this out you will only be able to chose one food. This is where the name attribute comes in. Not only will it be necessary in the future when you learn how to make forms work but (especially for the radio buttons) if the names are different you would be able to choose more than one of the choices. Let's try another type of form. This time we will use a pull down menu.

Pull-Down Menu

A pull down menu is another type of form that does not use the input tag. Instead we will use the <select></select> and <option></option> tags. Below you can see how these tags are supposed to be set up.

<form>
<select>
<option>Pizza</option>
<option>Popcorn</option>
<option>Chicken Wings</option>
<option>Tofu Burgers</option>
</select>
</form>

With a drop-down form you use the select tags on the outside and for each one of the choices you use the option tags. Just like the radio buttons, you can only choose one of the listed items.

You can also make groups in your drop downs. To do this all you have to do is surround the options you want in a certain group with the <optgroup> tags. Then you give the <optgroup> tag the label attribute to name the group. The group name will be bolded and italicized above your group. You can use this as many times as you want in your pull down menus.

<form>
<select>
<optgroup label="Group 1">
<option>Pizza</option>
<option>Popcorn</option>
<optgroup label="Group 1">
<option>Chicken Wings</option>
<option>Tofu Burgers</option>
</select>
</form>
 Other Buttons

We have already used the submit button in the email form above but there are also three other types of buttons that you can use. The first one I will tell you about is the regular button. For this the input would look something like this:

<input type="button" value="Click this button!" />

In this case you have to use the value or your button will be empty. Without some sort of scripting the button will do nothing. The next type of button works just like the submit button except you can use your own image in its place. This is called the image button. An example of this is below:

<input type="image" src="http://www.darkscarab.com/images/wallpapers/blades/red.jpg" />

To use this button you must have the image source or it will not work. And just like the image tag it is recommended that you use the alt="' attribute just in case the image does not work for some people.

The third type of button is the reset button. All this button does is clears all the information that has been put into the form so the user can start all over again.

<input type="reset" />

For this button to do anything you have to actually have a form with some information in at least one of the fields. Without information in any of the fields it is pointless to use this button.

Hidden Field

Why would someone want a hidden field? This is exactly what I thought when I first learned about it. But there are some cases where information needs to be passed from the form to the person receiving the form while the user does not need to see the information. To create a hidden field all you have to do is this:

<input type="hidden" value="blahblah" />

For hidden input forms to pass any information they need to have the value attribute. Without it the hidden form is useless.

Password Fields

Many sites have a username and password form. In the password form, the site will usually keep the password hidden by covering it up with a * or a •. To create an input field that does this all you have to do is set the type to password:

<input type="password" />

If you want the field to have the bullets or asterisks in there before the user begins typing you just have to use the value attribute. The amount of bullets or asterisks will depend on the length of your value.

Uploading Files

Sometimes there is a need to upload a file to a website. Just set the type attribute to 'file' and it will automatically add the browse button next to the text field.

<input type="file" />

These are all the types of input fields that you can use. Chances are you have seen all of them before (except for the hidden…) in forms that you have filled out in the past.

Label Tag

The label tag is used to label any of your inputs. When using the label tags you must use the for="" attribute. This is the name or id of the form unit you are labeling. Below, the left is an input with the label tags and on the right just uses text, but does the same thing:

<form>
<input type="text" id="name" />
<label for="name">Name:</label></form>

<form>
Name: <input type="text" id="name" />
</form>

So, why use the label tags? Well, it probably just helps center the text to you field in some cases. Overall it is up to you whether or not you want to use them. Not using the label tags uses less coding though.

Using Fieldset

You may have noticed that on some sites, there is a border around their forms. To do that you use the fieldset tags. You can see how I set it up below.

<fieldset>
First Name: <input type="text">
Last Name: <input type="text">
</fieldset>

Test out the fieldset tags on your own. When you open your form up in your browser you should see a border surrounding your form. You can also name your fieldset. To do this you would use the <legend> tags. The name you want to give to your field set will go in between the legend tags. Try it out and see how it looks. I have typed up an example below.

<legend>Personal Information</legend> <fieldset>
First Name: <input type="text">
Last Name: <input type="text">
</fieldset>

Your fieldset name should appear on the top left of your form and should cut off the border where it is located.