Using HTML

Forms

Forms are used to enable user feedback from your websites visitors to you. They return the contents to a specified email account. Each form must have a <FORM> tag at the start and a </FORM> tag at the end. All of the forms contents are placed between the <FORM> and </FORM> tags. Form contents are called fields. As they allow the user to input data, the tag is <INPUT>.

Text Field

A text field is a one line entry box, like most search boxes.

Exercise

To create a text input field, type in the following code:

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT type="text">
</FORM>
</BODY>
</HTML>

We can contol the size of the text box by adding a SIZE attribute:

Exercise

Add in a size attribute

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT type="text" size=50>
</FORM>
</BODY>
</HTML>

 

In order to know which text field is which when we recieve the email, we must name the fields using a NAME attribute.

Exercise

Add in a name attribute

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT type="text" size=50 name="firstname">
</FORM>
</BODY>
</HTML>

So that your user will know what information to type into the form, you need to provide a text label. For text boxes the label should be in front of the text box.

Exercise

Add in a text label

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM>
Enter first name
<INPUT type="text" size=50 name="firstname">
</FORM>
</BODY>
</HTML>

You can attach labels to fields so that physically disabled individuals who have trouble with fine motor control can click inside the field by clicking the label. The 'for' attribute must have the same name as the 'id' attribute of the field. In addition, all 'id' attributes must be unique to that page.

Exercise

Attach the label

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM>
<LABEL FOR="firstname">Enter first name</LABEL>
<INPUT type="text" size=50 name="firstname" id="firstname">
</FORM>
</BODY>
</HTML>

Each field should also have content inside it because some screen readers cannot see an empty field.

Exercise

Add content

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM>
<LABEL FOR="firstname">Enter first name</LABEL>
<INPUT type="text" size=50 name="firstname" id="firstname" value="enter first name">
</FORM>
</BODY>
</HTML>

Password Field

Password fields don't show the typed in text. Instead, for privacy, they show dots.

Exercise

Create a complete password field

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM>
<LABEL FOR="password">Enter password</LABEL>
<INPUT type="password" size=50 name="password" id="password" value="enter password">
</FORM>
</BODY>
</HTML>

Text Areas

Text areas are large areas which the user can type into. They are used when a lot of data is required. The code for these are slightly different, using a <TEXTAREA> tag. The size is given by columns and rows, not number of letters.

Exercise

Create a text area

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM>
<LABEL FOR="address">Enter address</LABEL>
<TEXTAREA name="address" cols="70" rows="5" id="address">enter address here </TEXTAREA>
</FORM>
</BODY>
</HTML>

Radio Buttons

These are used in groups to allow the user to select 1 of the possible answers. The names of the buttons in the group must be the same, but the values must be different. Only 1 radio button in a group can be chosen at a time.

Exercise

Create a radio button set

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM>
What is your favourite ice-cream?
<INPUT type="radio" name="icecream" value="vanilla">
<INPUT type="radio" name="icecream" value="chocolate">
<INPUT type="radio" name="icecream" value="strawberry">
<INPUT type="radio" name="icecream" value="other">
</FORM>
</BODY>
</HTML>

For the form to make sense to the user we need to add in some text labels outside the tags. For radio buttons, the labels go after the buttons.

Exercise

Add labels

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM>
What is your favourite ice-cream?
<INPUT type="radio" name="icecream" value="vanilla" id="vanilla">
<LABEL for="vanilla">vanilla</LABEL>
<INPUT type="radio" name="icecream" value="chocolate" id="chocolate">
<LABEL for="chocolate">chocolate</LABEL>
<INPUT type="radio" name="icecream" value="strawberry" id="strawberry">
<LABEL for="strawberry">strawberry</LABEL>
<INPUT type="radio" name="icecream" value="other" id="other">
<LABEL for="other">other</LABEL>
</FORM>
</BODY>
</HTML>

Check Boxes

These are used in groups to allow the user to select more than 1 of the possible answers. The names of the buttons in the group must be the same, but again, the values must be different. 2 or more check boxes in a group can be selected at a time.

Exercise

Create a checkbox set

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM>
Which activities do you like?
<INPUT type="checkbox" name="activities" value="running">
<INPUT type="checkbox" name="activities" value="jogging">
<INPUT type="checkbox" name="activities" value="swiming">
<INPUT type="checkbox" name="activities" value="other">
</FORM>
</BODY>
</HTML>

As with the radio buttons, we need to add in some text outside the tags for the form to make sense.

Exercise

Add labels

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM>
Which activities do you like?
<INPUT type="checkbox" name="activities" value="running" id="Running" >
<LABEL for="Running">Running</LABEL>
<INPUT type="checkbox" name="activities" value="jogging" id="Jogging" >
<LABEL for="Jogging">Jogging</LABEL>
<INPUT type="checkbox" name="activities" value="swiming" id="Swimming" >
<LABEL for="Swimming">Swimming</LABEL>
<INPUT type="checkbox" name="activities" value="other" id="Other" >
<LABEL for="Other">Other</LABEL>
</FORM>
</BODY>
</HTML>

Dropdown Menus

Menus are used instead of either radio buttons or check boxes. They have the advantage of saving space on the screen where lots of options need to be displayed. The <SELECT> and <OPTION> tags are used.

Exercise

Create a simple dropdown menu where the user can select one option only.

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM>
<LABEL for="favouriteanimal">Which is your favourite animal?</LABEL>
<SELECT name="favouriteanimal" id="favouriteanimal">
<option label="cat" selected>cat</option>
<option label="dog">dog</option>
<option label="elephant">elephant</option>
<option label="rhino">rhino</option>
<option label="baby chick">baby chick</option>
<option label="other">other</option>
</SELECT>
</FORM>
</BODY>
</HTML>

Exercise

Create a menu which acts like a checkbox type selection, where multiple options can be chosen.

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM>
<LABEL for="animalsilike">Which animals do you like?</LABEL>
<SELECT name="animalsilike" id="animalsilike" size="3" multiple>
<option label="cat" selected>cat</option>
<option label="dog" selected>dog</option>
<option label="elephant">elephant</option>
<option label="rhino">rhino</option>
<option label="baby chick">baby chick</option>
<option label="other">other</option>
</SELECT>
</FORM>
</BODY>
</HTML>

Submit and Reset Buttons

In order to allow the user to submit a form you need to have a submit button. You can also supply a reset button to allow the user to clear the form.

Exercise

Create submit and reset buttons

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT type="submit" value="Send">
<INPUT type="reset" value="Reset">
</FORM>
</BODY>
</HTML>

Hidden Fields

Hidden Fields are used to tell the computer where to send the form. You will have a different hidden field for your email address, the subject of the email and the page you want to return the user to when they have sent the form. The name values are CASE SENSITIVE. Because these fields are hidden you will not see them in the browser window. They are only used by the computer. The user does not know, or need to know that they are there.

Exercise

Create hidden fields

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM>
<input type="hidden" name="TO" value="vivienne_trulock@hotmail.com">
<input type="hidden" name="RETURN" value="http://www.ilikecake.net/thanks.htm>
<input type="hidden" name="SUBJECT" value="contact form">
</FORM>
</BODY>
</HTML>

Form CGI Script

The last thing we need to do is to tell the form where to go to be processed. For this, a CGI script is needed. CGI stands for Common Gateway Interface, and is normally written in a language called Perl or C++. If you have a paid server space, your host company will normally provide you with a cgi-bin, or folder with common cgi scripts. If you are using a free server you can use the one given here. The action, method and name are all attributes of the form tag.

Exercise

Create cgi bin link

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<FORM action="http://homepage.tinet.ie/cgi-bin/auto_mail.cgi" method="post" name="ContactForm">
</FORM>
</BODY>
</HTML>

Exercise

Create an entire form and test it out by putting your own email address in the 'TO' hidden field and submitting the form to it.

The next thing to learn is how to make your pages look pretty by adding colour.