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.
created & designed by Vivienne Trulock for ilikecake.net
.
.