Form fields are used to collect and hold the information that is passed to the server.

<input> tag Most form fields use this tag. It is a non-paired tag the requires attributes to determine it's behavior.

The most commonly used attributes are:

  • type
  • name
  • value
type attribute This is the most common attribute, and it determines the type of field that will be displayed:
  • text - a one-line text field that allows a user to enter text.  A white, rectangular area will be displayed in the form.
  • hidden - a field used for storing a value that the user will never see.  Very useful for passing information from page to page, such as session information.
  • checkbox - a square box that allows users to mark with a checkmark.  Usually used in a section where you want a user to "select all that apply" in a questionnaire type of form.
  • radio - a circle that allows a user to make a selection from several choices.  Usually used in a section where you want a user to "select the best choice" in a questionnaire type of form.
  • button - displays a button.  You can specify code that gets executed when the button is clicked.
  • submit - displays a button that, when clicked, will submit the form to the server.
  • reset - displays a button that, when clicked, will reset all form fields back to their original values.
name attribute This attribute is used to identify the field, and is very useful when attempting to retrieve the value stored in the field once it reaches the server.  Make a habit of always naming your fields.  When naming radio input tags, it is a common practice to name related radio tags the same.  This is what forces one choice from several.

 
value attribute For buttons, this attribute determines the label that appears on the button.  For text and hidden, it determines the text stored in the field.
<textarea>
</textarea>

tag

 A paired tag (closing tag required) that allows the user to enter text in a multi-line format.  The name attribute should be used with this tag.
<select>
<select>

tag

 A paired tag (closing tag required) that allows the user to make a choice from a list.  Between the tags are a list of <option> tags that are the items appearing in the list.
<option>
</option>

tag

 The text between these tags is what is displayed in the browser.

Use the value attribute of this tag for passing the selection value to the server program.

One last useful bit of information. Fields can respond to events. It is common to code buttons with an onClick attribute, for example. The onClick is the name of a JavaScript function that is fired when the button is clicked.

To see an example of all these form fields, go to the Form Fields example page. Feel free to download the page and open it in a text editor to see how it was done. You can download the page in one of two ways:

  1. Right-click on the hyperlink and select "Save Target As..." from the pop-up menu.
  2. Click on the link, then choose "File" -> "Save As.." from the the menu bar.