Introduction
Overview
History
Advice
IDE
Books
Tutorials

Beginners
Introduction
Text Formatting
Images
Tables
Forms
Entities/Colors

Advanced
Frames
Image Maps
Stylesheets
Reference

Community
Web Sites
Mailing Lists
USENET
Vendors
News

GBIC >> HTML >> Forms

Forms
One of the uses of HTML pages (web pages) is to allow a user to submit data to a central server for processing. This could be a purchase order, a service order, a go-do list, a comment, a question - anything the user might want to send to the owner of the web site. The information sent to the server can be archived or used immediately to send a new web page to the user for further response, providing a valuable means of interactivity between the user and the web site.

A form, which is one or more input elements (text boxes, check boxes, etc.) contained in the web page, is the technique supported by HTML pages to allow this interactivity. HTML tags are used to define the input elements in the form as well as to determine where and how the form content will be submitted.

Form Basics Attributes Submit a Form

Return to top of document

Form Basics

A form is created by using HTML tags to create input elements (text boxes, check boxes, etc.) between a pair of <form> tags. Other content can be placed between the tags, but only the information in the form elements will be submitted to the server for processing.

There are four HTML form input elements:

<input>: creates one of nine different input field types
<textarea>: multi-line text box
<select>: dropdown selection of values
<button>: button (no data involved)

Since the <input> element can be used to display up to nine different elements, there are actually twelve ways in which a user can submit information to the server. Here's the HTML code and resulting form using one of each of these form elements, including each of the nine types of <input> form elements.

Code

Resulting Form

<form>
  <input type=text value="Enter text">
  <input type=checkbox>Check me!
  <input type=radio>Select me!
  <input type=password value=123456>
  <input type=submit>
  <input type=reset>
  <input type=button value="Press Me">
  <input type=file>
  <input type=image src="ballblue.gif">
  <textarea>
      This is a multi-line textbox
  </textarea>
  <select>
      <option value=dog>Dog
      <option value=cat>Cat
  </select>
  <button>
      Press Me
  </button>
</form>

Input (text)
Input (checkbox)	Check me!
Input (radio)	Select me!
Input (password)
Input (submit)
Input (reset)
Input (button)
Input (file)
Input (image)
Textarea	This is a multi-line text box
Select
Button

There are five additional form-related elements.

hidden: The hidden form element is similar to a text input form element, except that it is not displayed in the web page. It is submitted with other form elements when a Submit button is pressed. It is typically used where the web page author wants to return information to the server that is cannot be viewed or edited by the user.
fieldset: xxx
legend: xxx
label: xxx
isindex: xxx

See the reference section for additional details on these elements:

Return to top of document

Attributes

In today's browsers, HTML tags are considered objects whose attributes can be manipulated by various, embedded scripting languages (such as JavaScript or VBScript). To support identification of the tags (objects), all HTML tags support the name attribute. Additionally each of the form input elements also support a value property. When a form is submitted to the server the name and value of each form input element are sent to the server. See the next section for additional detail on submitting a form.

There are additional attributes supported by the four HTML form input element tags. Some of the most frequently used attributes are given in the table below. See the reference section for a complete listing of attributes.

<input>
- name - name of this field
- value - depends on type of field assigned to type attribute
- size - width of text field
- maxlength - maximum number of characters allowed in a text field
- checked - status of a radio button
- src - URL of image type
- width - width of image type
- height - height of image type
- align - how text should flow around an image type
- readonly - prevents user from changing contents/status of form element
<textarea>
- name - name of this field
- cols - width of the field
- rows - number of rows in the field
- wrap - whether text wraps in the field
- readonly - prevents user from changing contents
<select>
- name - name of this field
- multiple - allows more than one choice to be selected
- size - how many options to show
- readonly - prevents user from changing contents
<button>
- name - name of this field
- value - text displayed on the button

Return to top of document

Submit a Form

When a form is submitted by pressing a Submit button, information from the form is sent to the web address (URL) assigned to the action attribute of the <form> tag. For example, the following is used to send the content of the form to a server. In the example, when the server receives the data from the browser, a CGI script called mycgi.pl will be run and fed the information from the form.

  <form action="../cgi-bin/mycgi.pl">

All form input elements support the name and value attributes. When the Submit button is pressed, the name/value pair of information for each form element is sent to the server. The name/value pairs may be sent to the server in one of two formats, "GET" or "POST", as assigned to the method attribute of the <form> tag.

Additional information on CGI scripts and transfer of form information to servers can be found on this site.