Data Network Resource
       Earn on the Web


8. Forms



8.1 Initial Form Setup


A Form is a way of allowing a visitor to your website to feed back information such as comments, data etc. The <FORM> and </FORM> tags contain a number of elements that allow the Form to actually do something.

Within the opening FORM tag there is defined an ACTION that is used to point to a URL. This could be a CGI script that processes the Form data or an E-mail address to which the data within the form is sent as a .DAT file which is readable by a text editor. The other required attribute within the FORM tags is the METHOD. Most often this will take the format METHOD="POST" to define that the HTTP packets will have the method POST meaning that the data is placed in the body of the HTTP rather than METHOD="GET" which places the data within the URL itself. W3C require that the character set be defined for the Form using the attribute ACCEPT-CHARSET. (refer to HTTP for more detail).

You then need to lay out the form. You do this between the FORM tags using, first of all <INPUT TYPE>. The most important values are SUBMIT and RESET which are default names for buttons within the form. You can change these names by using the VALUE attribute e.g. VALUE="changed button name". There is another attribute for the INPUT TYPE called NAME that is used to assign a name to the object (this is used for identification purposes by programs, databases etc.). Instead of using SUBMIT for the INPUT TYPE you could include an image i.e. a button e.g. <INPUT TYPE="image" SRC="images/button.gif">. When clicked on, the form posts you the (x,y) coordinates of where the mouse was when the user clicked the button. This can be used to send the data as an attachment to the E-mail, rather than within the body of the E-mail itself. Other attributes that apply to other elements such as BUTTON, SELECT, TEXTAREA include DISABLED which disables user input, ACCESSKEY which assigns a keyboard shortcut to an element and TABINDEX which allows the user to use the TAB key to cycle through the available fields.

8.2 Multiple Choice


A pull-down menu can be produced using the <SELECT> and </SELECT> tag pair within the FORM tags. Each menu item is identified by an <OPTION> and </OPTION> tag pair. The VALUE attribute requires a name so that when a reply is sent to the program, or arrives via E-mail, the reply can be identified. Between the <OPTION> and </OPTION> tags you type the label showing how the item will appear in the menu. You can set up a static menu rather than a pull-down one by using the SIZE attribute within the <SELECT> and </SELECT> tag pair, and giving it a number to suit the number of items within the menu. You can decide to have a particular item at the top of the menu rather than the default of whatever comes first. You do this by using the keyword SELECTED within the <OPTION> tag. You can set up a scrolling list of items by using the SIZE=number attribute. In addition, you can allow the user to select more than one item from the list by inserting the keyword MULTIPLE within the <SELECT> tag.

You can set up radio buttons from which a user can choose one answer. To do this, within the <FORM> and </FORM> tags, use the value RADIO for the INPUT TYPE. You then group radio buttons together by using the same NAME attribute value. For each button you assign a value to the VALUE attribute to identify the answer to the program or within the E-mail. Finally, you type a text string after each <INPUT TYPE> that is displayed by each button. If you add the keyword CHECKED to one of the radio buttons, then this particular radio button appears as already selected when the form is first displayed. Of course the user can change this when filling in the form.

The pull-down menu, static menu or radio buttons are fine when one item out of a number of options is to be selected. You may however, want a user to select more than one option. To do this you can set up a number of checkboxes for a user to choose from. For checkboxes, use the value CHECKBOX for the INPUT TYPE. The NAME attribute distinguishes between the answer, the VALUE attribute is not required. Any number of the checkboxes ca be selected and the ones that are selected are identified within the E-mail or to the program receiving the data.

8.3 Entering Text


As well as using the mouse to fill in a form, the user can type in text. To create a text box you can use the INPUT TYPE of text, in order to allow input of a single line of text. Give this text a name using the NAME attribute to identify it for the program or the E-mail. The VALUE attribute is purely optional and can be used to prefill the text box with text that is likely to be required by the user anyway. You can define the size of the text box in characters, by way of the SIZE attribute in the INPUT TYPE. You can also limit how many characters are allowed to be entered using the MAXLENGTH attribute.

Password entry is treated in a similar manner to text entry other than chracters entered by the user are displayed as asterisks on the screen. The INPUT TYPE is password.

Although you can allow a very long line of text to be entered using the value TEXT, you can provide greater space for input by using the <TEXTAREA> and </TEXTAREA> tag pair. You use the NAME attribute to name the text and use the attributes ROWS and COLS to determine the size of the display text box in characters, as you type more than the allotted space a scroll bar appears automatically. As with the single line text box, you can pre-enter text by typing it within the <TEXTAREA> and </TEXTAREA> tag pair.

8.4 Uploading files


You can upload files via the use of the file input type. Use the SIZE attribute to determine the path length plus file name size that will be displayed on the screen. Go for a value of at least 30 to make it useable, otherwise you could find that that the file won't load into the text box. Within the FORM tag you will also need to set the encrytion type that is suitable for the software that uses the data, so use the attribute ENCTYPE="multi-part/form-data".

8.5 Form Example


Examine the following code which produces a form that incorporates the features previously mentioned:
<FORM ACTION="mailto:somebody@nowhere.cog.uk" METHOD="POST">
	<DIV>
	Before using this form you must type in your password
	......only joking!
	Type anything you like and it will be displayed
	as asterisks.  You are limited to 10 characters.
	</DIV>
	<BR>
	<INPUT TYPE="password" NAME="password" SIZE="10"
	MAXLENGTH="10">
	<BR>
	<BR>
	<BR>
	<BR>
	<DIV>
	With this menu, you can only select one option.  Do
	you like this pull
	down menu?
	</DIV>
	<BR>
	<SELECT NAME="pulldown">
		<OPTION VALUE="yes">Yes</OPTION>
		<OPTION VALUE="no" SELECTED>No</OPTION>
		<OPTION VALUE="dunno">Don't Know</OPTION>
	</SELECT>
	<BR>
	<BR>
	<BR>
	<BR>
	<DIV>
	With this menu, you can select more than one option using
	the 'Shift' and
	'Ctrl' keys as normal in Windows, 
	and there is a scroll bar.  Give reasons why you like this
	pull down menu?
	</DIV>
	<BR>
	<SELECT NAME="pulldown" SIZE=4 MULTIPLE>
		<OPTION VALUE="pretty">It's pretty</OPTION>
		<OPTION VALUE="cool" SELECTED>It's cool</OPTION>
		<OPTION VALUE="scroll">There's a scroll
		bar</OPTION>
		<OPTION VALUE="multiple">I can select multiple
		options</OPTION>
		<OPTION VALUE="what">What Pull Down menu?</OPTION>
		<OPTION VALUE="why">Why am I here?</OPTION>
	</SELECT>
	<BR>
	<BR>
	<BR>
	<BR>
	<DIV>
	Now some radio buttons, again you can only select one option,
	what do you think?
	</DIV>
	<BR>
	<INPUT TYPE="radio" NAME="radio question" VALUE="love"
	CHECKED>Love them
	<BR>
	<BR>
	<INPUT TYPE="radio" NAME="radio question" VALUE="like">Like
	them
	<BR>
	<BR>
	<INPUT TYPE="radio" NAME="radio question" VALUE="ok">
	They're OK
	<BR>
	<BR>
	<INPUT TYPE="radio" NAME="radio question" VALUE="unsure">
	Not sure about
	them
	<BR>
	<BR>
	<INPUT TYPE="radio" NAME="radio question" VALUE="awful">
	Awful
	<BR>
	<BR>
	<BR>
	<BR>
	<DIV>
	With the checkboxes, you can select as many options as you like.
	</DIV>
	<BR>
	<INPUT TYPE="checkbox" NAME="chips">I like chips
	<BR>
	<BR>
	<INPUT TYPE="checkbox" NAME="chocolate">I like chocolate
	<BR>
	<BR>
	<INPUT TYPE="checkbox" NAME="chips">I like chips mixed with
	chocolate
	<BR>
	<BR>
	<INPUT TYPE="checkbox" NAME="chips">I feel sick reading this!
	<BR>
	<BR>
	<BR>
	<BR>
	<DIV>
	Do a little Typing into this text area, you are limited to 20
	characters
	though and you will have to overwrite
	the rubbish!
	</DIV>
	<BR>
	<INPUT TYPE="text" NAME="rubbish" VALUE="rubbish goes in here"
	SIZE="60"
	MAXLENGTH="20">
	<BR>
	<BR>
	<BR>
	<BR>
	<DIV>
	Here is some more text, but you cannot change this because user
	input has
	been disabled.
	</DIV>
	<BR>
	<INPUT TYPE="text" NAME="planet" VALUE="You are of this Planet"
	SIZE="22"
	MAXLENGTH="22" DISABLED>
	<BR>
	<BR>
	<BR>
	<BR>
	<DIV>
	Why not type an essay in this text area, you initially have 4 rows
	and 30
	columns to type it in, if you type
	more then the scroll bar will appear.
	</DIV>
	<BR>
	<TEXTAREA NAME="essay" ROWS="4" COLS="30">Essay begins
	here...</TEXTAREA>
	<BR>
	<BR>
	<BR>
	<BR>
	<DIV>
	Browse for a file and select it to send with this form data.
	</DIV>
	<BR>
	<INPUT TYPE="file" SIZE="30">
	<BR>
	<BR>
	<BR>
	<BR>
	<DIV>
	Optionally, you can submit the data as an attachment to the
	E-mail by clicking this image 
	<INPUT TYPE="image" SRC="images/attach.gif">
	</DIV>
	<BR>
	<BR>
	<BR>
	<BR>
	<DIV>
	And finally, the conventional, but all important, submit and
	clear buttons.
	</DIV>
	<BR>
	<INPUT TYPE="submit" VALUE="send me baby!" NAME="send">
	<INPUT TYPE="reset" VALUE="cancel this" NAME="cancel">
</FORM>	
Notice how each element within this form has a unique label (except the radio buttons), this is very important!

Click on Fake Form to see how the code presents the form.

You will see from the code that I have used line breaks extensively to provide decent gaps between the elements of the form. I wanted to control the layout of the form in as simple a way as possible so as not to detravt too much from the code of the form itself. Traditionally, forms were inserted within the <PRE> and </PRE> tag pair so that they could be structured manually using spaces and rows. This however has been superceded by the use of tables to control the form layout. The best way of combining forms and tables is to put the tables within the form, rather than the other way around. This is because forms have extra space requirements around the form elements which are often difficult to quantify.

Another thing that you may notice is that using the TAB key allows you to cycle through each of the available elements within the form.


Valid HTML 4.01 Transitional




Utility Warehouse     Earn on the Web     Free book on how to make money    


All rights reserved. All trademarks, logos, and copyrights are property of their respective owners.