DevGuru HTML Tag: form


			TAG: form
			<form> ... </form> Available in versions: 2.0, 3.2, 4.0 Browser compatibility: Explorer 4, 5 Netscape 4, 6 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. Core Attributes class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title Attributes accept The accept attribute is a comma-separated list of file types that can be accepted by the server when using the type="file" content. accept-charset The accept-charset attribute is a comma-separated or space-separated list of the character types that the server must be able to support (process) when the contents of a form are submitted. action The action attribute sets the URL of the page that the contents (name/value pairs) of the form will be submitted to for processing. enctype The enctype attribute specifies the MIME type used to encode the contents of a form. The default is application/x-www-form-urlencoded. When using type="file" content, this attribute must be set to multipart/form-data. method The method attribute specifies which of two permitted HTTP methods will be used to pass the contents of a form. The more commonly used post method submits the contents of the form in a two step procedure. First the URL specified by the action attribute is contacted. Second, if the contact is successful, the contents are transmitted to the URL. The get method appends the contents to the end of the URL specified by the action attribute. (A question mark is used to delimit the end of the URL and the start of the contents.) name The name attribute is a string of characters that is used to label a form control (field) with a name. The name must be unique to that document and cannot be reused. onreset The onreset attribute is an event that allows the execution of JavaScript code when the user resets (clears) the form. onsubmit The onsubmit attribute is an event that allows the execution of JavaScript code when the user submits the form. For example, you could call a JavaScript function that performs client-side form verification to ensure that the form is filled out correctly (see code example). target The target attribute is used to submit the contents of the form to a specified window or frame. Here is a sample form that includes client-side verification of fields. <html> <head> <title>Form Examplem</title> <script language="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: Click here to view and test this form.