HTML:Forms

Introduction

Every time you log into a webpage, enter your credit card details, complete an online application form you are using forms. They are everywhere on the WWW. They provide the facility to interact with a website.

Forms are only a method of capturing user input – if you imagine applying for a passport or a driving licence, the filling-out of the form is only the capturing of your information. If the form just sat in a pile of forms, and no-one ever processed them, we'd all agree that using the form was pointless.

It is the same for websites. If nothing ever happens to the data entered into the form, then there is no point to them. Getting computers to log you in to secure information, or getting the information entered to generate an order for a computer is where the real interesting stuff happens – but we can't cover that in a chapter – that's a workbook all by itself.

For the purposes of this workbook and associated assessments, we will experiment with designing forms, and only very briefly using them.

The Form Tag

The form tag, like most other tags has a start and an end tag <FORM></FORM>. There are a number of attributes that MUST be set before the form will perform any function. For this exercise, I'll show you how to create a form that automatically sends an email to a specified address with the contents of the form.

<FORM method="post" action="mailto:nobody@wlv.ac.uk">

FORM

There are two attributes of the <FORM> tag in the example above. The first is the METHOD. The method controls the way in which the form sends information. The example above is sufficient for all your needs, but you may be interested in researching the differing methods, and what they do. Any good HTML tutorial website will give you this information.

action

The ACTION attribute is more important, in this instance, as it controls where the information is sent when the form is submitted. In the example above, the data is going to be sent by eMail to the specified address.

NOTE: When you write your own forms, remember to change the eMail address to your own address.

The Input Tag

Every item on a form that captures data (textbox, checkbox, radio button, pull down list) is an element of the form. The <INPUT> tag is used to display a data capture element on the form. It does NOT have a closing tag.

<INPUT name="username" type="text">

name

Probably the most important attribute of the INPUT tag. The NAME becomes very important when we look at dynamic web development in other modules. At this stage, just ensure that each INPUT tag has it's own unique name – try to create meaningful names for the inputs, you'll see why later. For an automatic email form like the one we are producing, the name attribute is very important. When the information reaches a destination, the name is shown before the information, so that it makes more sense to the reader.

type

There are several types that you can use – the most popular of which is "text." You can also use "password" which creates a data input that masks the characters you type in (i.e. it shows ***** instead of what you type), and many more. We'll look at some more in the following sections.

size

For text input tags, you can control the size as it's shown on the screen and also the maximum length of data that a user can enter by using "size" and "maxlength" attributes. These will only work on text and password input tags.

<INPUT name="username" type="text" size=5 maxlength=10>

TIME TO PRACTICE

Create a simple form, using the "standard web page structure" as the basis and including a form tag, and several inputs afterwards. Experiment with positioning the inputs and putting text before the start of the input tag as a label for the input. Remember to end the form </FORM> before you end the </BODY>

The Radio Button

The next input type on our list is the radio button also known as options, because you can only select one option at a time. Selecting a second option has the effect of "unselecting" the first. Try the following example, and try to click the different radio buttons to see what happens.

<FORM method="post" action="mailto:nobody@wlv.ac.uk"> <INPUT type="radio" name="driving" value="yes">Yes, I own a driving licence, <INPUT type="radio" name="driving" value="no">No, I don’t </FORM>

Notice here how we have used "VALUE" within the attributes of the INPUT tag – this only works for data entry elements – no other tag uses value. Whatever is in value is sent to the program or email when the user selects that option.

Checkboxes

Similar to radio buttons, checkboxes can be used to display a number of options to a user. The difference between checkboxes and radio buttons is that each checkbox can be selected independently of the other checkboxes – you can click many checkboxes and only one radio option. You can select many options.

<INPUT type="checkbox" name="cat">I own a cat<BR> <INPUT type="checkbox" name="dog" CHECKED>I own a dog<BR> <INPUT type="checkbox" name="fish">I own a fish<BR>

You can use the "checked" attribute to force the box to appear already checked when the form loads.

Hidden Fields

You can also use the input tag to send information that is hidden from the user of the web page. Perhaps you have a number of identical forms on a number of pages, and when the information comes to you, you want to identify what page it came from.

<INPUT type="hidden" name="sourcepage" value="homepage.html">

This tag won’t be displayed on the form, but the information will be sent when the form is submitted.

Buttons – Submit and Reset

Until now, you haven’t been able to do anything with your form. You can enter information but nothing happens to the information. Buttons are usually used for one of two purposes, to submit the form, or to reset the form to whatever state it was in when it was first loaded.

<INPUT type="reset" value="Reset">

Here, VALUE is used to control the label on the button.

The submit button triggers the process of sending the information on the form to a destination. In our example, the contents of the form are to be sent to an eMail address. The destination is controlled by the ACTION property of the FORM tag.

<INPUT type="submit" value="Send">

When the submit button is clicked, the action is performed – in this instance, the email sending is triggered.

A Few More Form Tags

There are a number of form tags you can use that are not covered in the above examples, two of which are <TEXTAREA> and <SELECT>. See if you can find out how to incorporate them into your forms.

NOTE: when you use this example, what happens when you click the submit button can vary from PC to PC. It was designed so that whatever email program you use opens up a new message with some information already in the email ready for the user to click send. However, depending on the security policy of the machine you're using, this may prompt you to log in, show you a security risk warning box, etc.

TIME TO PRACTICE

Create a form using the input types described. Change the eMail address to your own address and experiment with entering different information. If the system you are using is set up correctly, you’ll be able to submit your forms and you’ll receive an eMail containing the information entered on the form.

Ready to move on?

You're all happy up to this point? If you're sure you're OK with ALL the material up to now, you can have a look at the final, advanced topic of 08 - Cascading Style Sheets