HTML » Tags » form

Version: 2.0, 3.2, 4.0

Compability: Explorer 4, 5  Netscape 4, 6

Syntax:
<form> ... </form>

The <form> tag is used to delimit the start and stop of a form element and serves as a container for form controls (fields). Control is a technical term which refers to the various elements that can be used inside a form to gather information. The information gathered is referred to as the contents or parameters of the form and is a collection of name/value pairs.

The four tags that can be used to build a form are:
 
button     input     select     textarea
 
The general concept is that the user fills out the appropriate sections of the form as a response to a request for information (such as a shipping address). The user then clicks the submit button. The contents of the form are then submitted for processing, usually to another page on the web site. However, you can also submit to the same page, or to a window or frame.
 
This ability to use a web site to display products and information, to gather a response via a form from a user, to store and manipulate the gathered information, and then to have the web site respond dynamically to the user input, is the heart of the e-commerce/e-business industry.
 
There are two required attributes for the form tag. The action attribute dictates where the form contents will be submitted. The method attribute specifies how to send the submission.
 
It is recommended that you should only place one form per page. It may prove best to divide a long form between two or more pages.
 
A form element should not contain other form tags. The closing tag is mandatory.
 

Examples

Code:
<html>
<head>
<title>Form Examplem</title>
<script type="text/javascript">
// checksubmit() has to be a function, not a subroutine, because the
// onSubmit attribute in the form tag (in
green text below) which calls
// this function requires a Boolean return value of true or false
// if the return is true, the form is automatically submitted without
// the need to call document.formname.submit()
// if the return is false, the form submission will be aborted and the client is sent
// back to the form to fill out the missing field
function checksubmit()
{
   // check to see if name field is empty
   // note that you use the name of the form and the field
   if (document.formname.fullname.value == "")
   {
      // tell client that you need the name
      alert("Please enter your full name")
      // send the cursor to the fullname field
      document.formname.fullname.focus()
      // field is empty, so return false to abort the form submission
      // the client is returned to the form
      return false
   }
   // check to see if email address field is empty
   if (document.formname.emailaddress.value == "")
   {
      alert("Please enter your email address")
      document.formname.emailaddress.focus()
      return false
   }
   // if both fields are filled out, return true
   // this triggers the form submission
   return true
}
</script>
</head>
<body onLoad="document.formname.fullname.focus()">
If you wish to receive information about upgrades to dgCharge,
please fill out this form.
<br>
<form method="post" name="formname" action="/technologies/html/quickref/html_form.html"
     onSubmit="return checksubmit()">
Full Name (required)<input type="text" name="fullname" size="30">
<br>
EmailAddress (required)<input type="text" name="emailaddress" size="30">
<br>
Phone Number (optional)<input type="text" name="phonenumber" size="15">
<br>
<input type="reset" value="Clear">
<input type="submit" name="submitbtn" value="Submit">
</form>
</body>
</html>
Output:
If you wish to receive information about upgrades to dgCharge, please fill out this form.
Full Name (required)
EmailAddress (required)
Phone Number (optional)
Explanation:

Here is a sample form that includes client-side verification of fields.

Language(s): HTML

See Also: