Form Elements

The following table lists a number of most commonly used elements on a form, with an example.

Form Elements Description Sample Definition
text Simple input field

Closely related element types are password (shows ***) and hidden (which are invisible but not secure).

 
<INPUT TYPE="text" NAME="firstName" SIZE=20>
textarea Handle input spanning multiple lines 
<TEXTAREA NAME="myDirections" ROWS=5 COLS=50>
default text
</TEXTAREA>
select: single selection Provides a dropdown list of items to select (single value can be selected)

Note: in Nav3+ or IE4+, JavaScript logic can dynamically add or remove items from the select list.

 
<SELECT NAME=persTitle onChange="checkTitle(this)">
<OPTION SELECTED> Ms.
<OPTION> Mr.
<OPTION> Mrs.
</SELECT>
select: multiple selections Provides a list of items (multiple items can be selected) 
<SELECT NAME=interest MULTIPLE
  onChange="checkInterest(this)">
<OPTION> Finance
<OPTION> Marketing
<OPTION> Production
<OPTION> Human Resources
</SELECT>
checkbox Used to indicate yes/no 
<INPUT TYPE="checkbox" NAME="CB">
radio (buttons) Lets user select a single item from a fully visible list. 
<INPUT TYPE="radio" NAME="grade"
  VALUE="9" CHECKED>Grade 9<BR>
<INPUT TYPE="radio" NAME="grade"
  VALUE="10">Grade 10<BR>
<INPUT TYPE="radio" NAME="grade"
  VALUE="11">Grade 11<BR>
<INPUT TYPE="radio" NAME="grade"
  VALUE="12">Grade 12<BR>
button Allows the user to explicitly initiate an action. 
<INPUT TYPE="button" VALUE="To Lower"
NAME="lowerButton" onClick="setCase('lower')">
submit A special facility is provided for submitting the form to the server. In the top code segment, the form specifies the action on submit.

In the bottom code segment, a special submit input type is provided to let the user initiate the submit.

 
// checkForm function is initiated to
// determine if submit should proceed
<FORM NAME="form1"
onSubmit="return checkForm(this)">

 

<INPUT TYPE="submit">

 Form Element Events

Form elements generally support a subset the following Event Handlers:

For example in the button row in the table above, you'll see that the JavaScript function setCase is initiated when the button is clicked.  A JavaScript reference book will indicate exactly which events apply to which form elements.