Forms can be a useful tool for inviting reader participation, whether you are carrying out a survey as a piece of research, or using them purely for communication purposes.
Designing useful forms should be your main goal. Make your forms:
- Friendly
- Well-organised
- Correctly sized.
To make you life easier when the data comes back to you make sure that your form:
- uses uniquely named and easily identifiable keywords for fields
- allows for brevity of processing and quick indexing where possible
- provides subtle guidance to your readers on the amount of input you are looking for.
All elements of the form need to be enclosed in form tags. Within these tags you can include almost any valid HTML tags such as paragraphs, tables etc. BUT you cannot nest forms.
The form tag generally has two attributes:
- action - this is a URL specifying where the contents of the form are to be sent. It could be an e-mail address in it's simplest form, but more usually would point to a cg- script/application that handles the forwarding of the data.
- method - the method attribute can have the values get or post. Use the get method when small amounts of data are involved or the data does not require external processing (e.g. with database searches.) More commonly used is post. This sends the information to the server as a separate input stream without adding any variables or arguments.
<form action="../cgi-bin/mailer.pl" method="post">
.
.
.
</form>
Have a look around the web for cgi script listings, there are plenty of free scripts available that will take form data and output it to an e-mail address in a legible format. Find one that suits you and stick with it. Most of them come with explanatory notes on how to set them up.
There are three main types of tag used within a form:
- input - used to define input fields
- select - used to create selection menus
- textarea - used to define multiple-line text input windows.
Input fields
You define input tags by adding the attributes type and name. The basic format is as follows:
<input type="type of field" name="meaningful name">
The data is sent to the cgi script as keyword (name) and value (input type in) pairs.
The type attribute has eight possible values.
1. Text fields
Defines a basic text box on screen on a single line. You can use four basic attributes for text fields:
- maxlength - maximum allowable character length of the field, if it's not set there's no limit.
- name - keyword associated with the input field.
- size - width of the input field, expressed as the number of characters for the text area.
- value - initial value of the text box, if any.
e.g.
Full Name: <input type="text" name="Full name" size="40">would appear as:
Full Name:
2. Password fields
Allows users to enter a password without the characters appearing on screen. The password itself is still passed intact to the server. Uses the same four attributes as text fields.
e.g.
Enter Password: <input type="password" name="password" size="16" maxlength="12">would appear as:
Enter Password:
3. Checkboxes
Creates boxes a user can check. You can use four basic attributes for checkboxes:
- checked - automatically checks the box when viewed.
- name - keyword associated with the input field.
- disabled - locks the box such that the user cannot change the selection.
- value - value to assign if the box is checked.
e.g.
Is the internet:
<input type="checkbox" name="internet" value="time consuming"> time consuming
<input type="checkbox" name="internet" value="fast"> fast
<input type="checkbox" name="internet" value="slow"> slowwould appear as:
Is the internet:
time consuming
fast
slow
4. Radio buttons
Creates circular buttons a user can check. You can use the same four basic attributes as for checkboxes.
The main difference between the two is that with radio set as the type the user can only select one option from the buttons with the same name.
e.g.
Are you an optimist or a pessimist?
<input type="radio" name="optimist" value="yes"> optimist
<input type="radio" name="optimist" value="no"> pessimistwould appear as:
Are you an optimist or a pessimist?
optimist
pessimist
5. Hidden fields
The hidden type creates fields that are not displayed and is only useful to provide essential input to your script. Uses two attributes:
- name - keyword associated with the input field.
- value - value of the field.
e.g.
<input type="hidden" name="subscription" value="magazine - PC Pro">
6. Reset
Usually displayed as a pushbutton, clears all the data in the form. Uses two attributes:
- name - keyword associated with the input field.
- value - value of the field, does not have to be set.
e.g.
<input type="reset" value="Clear Form">would appear as:
7. Submit
Usually displayed as a pushbutton, performs the action in the form tag. Uses two attributes:
- name - keyword associated with the input field.
- value - value of the field, does not have to be set.
e.g.
<input type="submit" name="submit1">would appear as:
8. Image type
Displays a graphic in place of the submit button, performs the action in the form tag. Uses two attributes:
- name - keyword associated with the input field.
- src - the image to be displayed.
- align - used to align the image with the text in the same line. Use top, middle, bottom.
e.g.
<input type="image" name="submit2" src="images/submit.gif" align="middle">would appear as:
Adding selection menus
The select tag is used to create two types of selection menus. An onscreen menu has selections that are completely visible and a pulldown menu has elements that are hidden until activated by the reader.
This time we need both an opening and closing select tag. There are three possible attributes for select:
- name - keyword associated with the input field.
- size - number of selection elements visible to the reader.
- multiple - allows the user to make multiple selections from the one list.
What types of publications do you read regularly?
<select name="publications" size=5 multiple>
<option>Books</option>
<option>Magazines</option>
<option>Newspapers</option>
<option>Comics</option>
<option>None</option>
</select>would appear as:
What types of publications do you read regularly?
If we changed size=5 to size=1 and take the multiple attribute out it would appear as:
Adding Text windows
The final element we can use on our forms is the textarea element. Using this enables us to define the size of the text box available to the user.
They are defined using opening and closing textarea tags. It has three attributes:
- name - keyword associated with the input field.
- rows - height of the text window in number of lines.
- cols - width of the text window in number of characters.
<textarea name="Course query" rows=8 cols=50></textarea>would appear as:
© 1999 Nix Designs