Form Elements

A form is way of adding interactivity by allowing your website users to respond and communicate to you directly from the site by email. The form may be designed to simply provide a means of commenting on the site, to complex order and information requests.

This tutorial is about the "nuts and bolts" of setting up a form for your web site. There are lots of things you can do to make your form look really good but that is a design issue; we are just going to make a basic form that works.

The "form" is the container for all other form elements:

Input
This tag allows the easy input of a single word or line of text, and typically defaults to a width of 20 characters. You will usually precede it with some descriptive text.

TYPE which can be one of Text, Number, Password, Checkbox, Radio, Submit, Reset. If omitted, Text is the default. The first 3 take text input from some platform-appropriate text-entry area, and the last 4 are represented typically as buttons or checkboxes. So the "Input" syntax is being somewhat overloaded.

NAME
Field name. Used by the form processor to identify data items.

VALUE
Assigns a default value to the field. You can specify text which you want to appear in the text entry field when the form is first loaded.

SIZE
Specifies how large of an area to allocate on the screen in characters. Note: the user can always type more characters than this amount, the text will just scroll to the left within the field.

Textarea
The <textarea> allows a text entry area with multiple rows. Note that it's a container: it has a closing tag. The enclosed text is displayed as the window contents.

Action
The action attribute tells the browser what to do with the form when it is submitted. In the following pages we will be using a "mailto" function.

On the next page we are going to create a very basic simple form.