Form BuildingBlock

Back to BuildingBlocks Index or press "h"

<FORM METHOD="POST" ACTION="mailto:[email protected]" ENCTYPE="text/plain"
	onSubmit="window.alert('This form is being sent by email.')"
	onReset="window.alert('Form has been reset.')">
</FORM>

The following are type of form elements available and are put between the opening <FORM> and closing </FORM> tags:

	
Button
Format and required attributes:

<INPUT TYPE="button" NAME="button1" VALUE="yes">Do you like this website?

Example:

 Do you like this website?

Optional attributes:
			NOTAB, onClick, TABORDER
Example with event handler (onClick):
<INPUT TYPE="button" NAME="button1" VALUE="yes" onClick="window.alert('Hi')"> Do you like this website?

 Do you like this website?
			
	
Checkbox
Format and required attributes:

<INPUT TYPE="checkbox" NAME="box1" VALUE="choice1"> Choice one.
<INPUT TYPE="checkbox" NAME="box1" VALUE="choice2"> Choice two.

Example:

 Choice one.
 Choice two.

Optional attributes:
			CHECKED, NOTAB, onClick, TABORDER
Example with CHECKED option:

 Choice one.
 Choice two.
			
		
File
Format and required attributes:

Pick a file to upload:
<INPUT TYPE="file" NAME="upload1">
Example:

Pick a file to upload:


Optional attributes:
			ACCEPT,	MAXLENGTH, NOTAB, onBlur, onChange, onClick,
			onFocus, SIZE, TABORDER, VALUE
Example with event handler (onClick):
<INPUT TYPE="file" NAME="upload1"> onClick="window.alert('Thanks for the warez!')";

Pick a file to upload:



Be aware that, "unlike other form input elements, the file-selection field only works
correctly with a specific form data encoding and transmission method. If you include
one or more file-selection fields in your form, you must set the enctyp attribute
of the <form> tag to multipart/form-data and the <form> tag's
method attibute to post. Otherwise, the file-selection field behaves
like a regular text fied, transmitting its value (that is, the pathname) to the server
instead of the contents of the file itself." HTML: The Definitive Guide, O'Reilly
			
Hidden

<INPUT TYPE="hidden" NAME="hidden1" VALUE="hiddenvalue">
Optional attributes:	none.
Image
<INPUT TYPE="image" NAME="image1" SRC="path_n_image.gif">Not sure what this input type is for...
Optional attributes:	ALIGN
			BORDER
			NAME
			NOTAB
			onClick
			TABORDER
Password (masked)

<INPUT TYPE="password" NAME="passname" VALUE="passvalue">Enter password here.
Optional attributes:	MAXLENGTH
			NOTAB
			onBlur
			onChange
			onFocus
			onSelect
			SIZE
			TABORDER
Radio

<INPUT TYPE="radio" NAME="radio1" VALUE="radiovalue">Choose only one.
Optional attributes:	CHECKED
			NOTAB
			onClick
			TABORDER
Reset

<INPUT TYPE="reset">Click to reset form.
Optional attributes:	NAME
			onClick
			TABORDER
			VALUE
Submit

<INPUT TYPE="submit">Click to submit form.
Optional attributes:	NAME
			NOTAB
			onClick
			TABORDER
			VALUE
Text

<INPUT TYPE="text" NAME="textname">Write me a paragraph.
Optional attributes:	MAXLENGTH
			NOTAB
			onBlur
			onChange
			onFocus
			onSelect
			SIZE
			TABORDER
			VALUE
Select

<select NAME="select1">
Optional attributes:	COLS
			MULTIPLE
			onBlur
			onChange
			onClick
			SIZE
Textarea

<textarea NAME="ta1">
Optional attributes:	COLS
			onBlur
			onChange
			onFocus
			onSelect
			ROWS
			SIZE
			VALUE
			WRAP