III.B. The INPUT sub-element

The INPUT element is a sub-element of the FORM element, and will not do much of anything if used outside of the FORM container tag. The INPUT element represents a user input field and always takes the following form:

<FORM ACTION="someURL" METHOD=POST>
    <INPUT NAME="somename1" TYPE="sometype1" ATTRIB ATTRIB>
    <INPUT NAME="somename2" TYPE="sometype2" ATTRIB ATTRIB>
</FORM>

The INPUT element always takes a NAME and a TYPE attribute. The name must be a unique name that will be used to identify it's entered value by the server side script mentioned in the FORM's ACTION attribute. The type specifies what type of input method is to be used and comes in 8 varieties: TEXT, PASSWORD, HIDDEN, CHECKBOX, RADIO, RESET, SUBMIT, and IMAGE.

Each type has certain attributes associated with it. The valid type attributes (not all attributes are valid with every type) are:

• NAME - specifies the name to be associated with this input field
• TYPE - specifies which type of input method is to be used
• VALUE - specifies the default value of the input field
• CHECKED - specifies that this field should default to being "on"
• ALIGN - specifies alignment (same as for the IMG tag)
• SIZE - specifies the size the field should be rendered as
• MAXLENGTH - specifies the maximum length allowed to be entered
• SRC - specifies the source URL of the image to be used

Following is a summary of each type's attributes (left side of table) alongside a brief snippet of code (left top of table) and the rendered version of the same code (right top of table).

TEXT: Displays a single line text entry field
Attributes: NAME SIZE MAXLENGTH VALUE	<INPUT NAME="name" TYPE="text" SIZE=30 MAXLENGTH=25> <INPUT NAME="email" TYPE="text" SIZE=30 VALUE="EMail here">
PASSWORD: Displays a single line text entry field but obscures the text entered NOTE: This does not encrypt the text entered, but only obscures it from sight
Attributes: NAME SIZE MAXLENGTH VALUE	<INPUT NAME="name" TYPE="password" SIZE=30 MAXLENGTH=25> <INPUT NAME="pwd" TYPE="password" SIZE=30 VALUE="Password here">
HIDDEN: Passes along a value that should be submitted but is already known
Attributes: NAME VALUE	<INPUT NAME="name" TYPE="hidden" VALUE="You shouldn't see this!"> <INPUT NAME="pwd" TYPE="hidden" VALUE="Or this...">
CHECKBOX: Displays a yes/no (boolean) field
Attributes: NAME VALUE CHECKED	What answer do you like (check all that apply 8^>)? <INPUT NAME="yes" TYPE="checkbox" VALUE="yes" CHECKED> Yes! <INPUT NAME="no" TYPE="checkbox" VALUE="no"> No!
	What answer do you like (check all that apply 8^>)? Yes! No!
RADIO: Radio buttons allow a one-of-many choice NOTE: All radio buttons of the same group must have the same name
Attributes: NAME VALUE CHECKED	What answer do you like (try to check all that apply 8^>)? <INPUT NAME="maybe" TYPE="radio" VALUE="yes" CHECKED> Yes! <INPUT NAME="maybe" TYPE="radio" VALUE="no"> No!
	What answer do you like (try to check all that apply 8^>)? Yes! No!
RESET: Usually a button that resets the form fields to their defaults
Attributes: VALUE	<INPUT NAME="erase" TYPE="text" VALUE="Type something"> <INPUT TYPE="reset"> <INPUT TYPE="reset" VALUE="Click me!">
SUBMIT: Usually a button that instructs the browser to submit the form
Attributes: NAME VALUE Click for the script's source code.	<INPUT NAME="entry" TYPE="text" MAXLENGTH=20 VALUE="Type something"> <INPUT NAME="bold" TYPE="submit"> <INPUT NAME="italics" TYPE="submit" VALUE="Click me for italics!">
IMAGE: Allows an image to be used in place of a submit button. NOTE: Clicking on an image returns the name/vals name.x & name.y
Attributes: NAME ALIGN SRC	To be implemented soon...
	To be implemented soon...

<- Back to Index