XHTML » Tags » form

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 separate closing tag is mandatory.
 

Examples

Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Form Example</title>
<script type="text/javascript">
// checksubmit() has to be a function, not a subroutine, because the
// onsubmit attribute in the form tag (in
red 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="get" name="formname" id="formname"
     action="xhtml_form.htm"
     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): XHTML

Events

onclick

Syntax: onclick="action"

The onclick event is associated with the single click of a mouse on a selected HTML tag (element). Whenever you single click the element, the script code of the onclick is executed. This script can also call functions or subroutines which contain code that you want to run when the single click occurs.

ondblclick

Syntax: ondblclick="action"

The ondblclick event is associated with the double click of a mouse on a selected HTML element. Whenever you double click the element, the script code of the ondblclick is executed. This script can also call functions or subroutines which contain code that you want to run when the double click occurs.

onkeydown

Syntax: onkeydown="action"

The onkeydown event is associated with pressing down a key on the keyboard while the mouse is inside a selected HTML tag (element). In other words, the key down event occurred while the HTML element was in focus. Whenever you press down the key, the script code of the onkeydown is executed.

onkeypress

Syntax: onkeypress="action"

The onkeypress event is associated with press of a key on the keyboard while the mouse is inside a selected HTML element. In other words, the key press event occurred while the HTML element was in focus. Whenever you press the key, the script code of the onkeypress is executed.

onkeyup

Syntax: onkeyup="action"

The onkeyup event is associated with releasing up a key on the keyboard while the mouse is inside a selected HTML tag (element). In other words, the key up event occurred while the HTML element was in focus. Whenever you release the key, the script code of the onkeyup is executed.

onmousedown

Syntax: onmousedown="action"

The onmousedown event is associated with clicking down the mouse button while the mouse is inside a selected HTML tag (element). In other words, the mouse down event occurred while the HTML element was in focus. Every time you click down the mouse, while inside the element, the script code of the onmousedown is executed. This script can also call functions or subroutines which contain code that you want to run when this event occurs.

onmousemove

Syntax: onmousemove="action"

The onmousemove event is associated with moving the mouse around while inside a selected HTML tag (element). In other words, the mouse move event occurred while the HTML element was in focus. Every time you move the mouse around the element, the script code of the onmousemove is executed. This script can also call functions or subroutines that contain code that you want to run when this event occurs.

onmouseout

Syntax: onmouseout="action"

The onmouseout event is associated with moving the mouse out of a selected HTML tag (element). In other words, the mouse out event occurred while the HTML element was in focus. Every time you move the mouse out of the element, the script code of the onmouseout is executed. This script can also call functions or subroutines which contain code that you want to run when this event occurs.

onmouseover

Syntax: onmouseover="action"

The onmouseover event is associated with moving the mouse over a selected HTML tag (element). In other words, the mouse over event occurred while the HTML element was in focus. Every time you move the mouse over the element, the script code of the onmouseover is executed. This script can also call functions or subroutines which contain code that you want to run when this event occurs.

onmouseup

Syntax: onmouseup="action"

The onmouseup event is associated with the releasing up portion of a click of the mouse while inside a selected HTML tag (element). In other words, the mouse up event occurred while the HTML element was in focus. Every time you release the mouse up, while in the element, the script code of the onmouseup is executed. This script can also call functions or subroutines which contain code that you want to run when this event occurs.

See Also: