Using the Form Tag

HTML forms are what you use to collect customer responses and add interactivity to your website. HTML forms interact with scripts (typically CGI, JavaScript, or PHP) to collect data, record information, or simply involve your readers with your web page. Forms are made of text boxes, check boxes, radio buttons, drop-down lists, and other input fields.

The HTML Form Element

The FORM element is the element that surrounds all forms on a web page. HTML5 no longer requires form elements to be inside the FORM element, unless there are multiple forms on the page.

In HTML 4.01, you can place the FORM element anywhere within the BODY of an HTML document, and all INPUT, SELECT, and TEXTAREA elements must be contained within it.

The FORM element has the following attributes:

• action (required in HTML 4.01)
  This attribute tells the browser the location of the script that will process this form. Normally, this is a JavaScript, Perl script, or other program located on the web server, but you can use email to send the form results. For example:

  <form action="mailto:webdesign@aboutguide.com">

  In HTML5 you can replace the action attribute with an event attribute like onclick to activate the form. If you use an event attribute in HTML 4.01, you still need to have the action attribute set to a default value, like: action="#" for the form to validate.
• method
  The method attribute defines how the browser should submit the form data. There are two methods you can use: get and post. The get method puts the information in a query string. Get is the default method, and sends the form data attached to the URL after a question mark (?). For example:

  http://www.server.com/cgi-bin/test.pl?name=value

  The post method sends the form information as a data block to the server through HTTP protocols. This method is not visible to the end user, and is best for most standard forms.
• enctype
  The enctype attribute indicates the format of the data submitted to the server. This is most often used with forms where there is a file upload option. The default is application/x-www-form-urlencoded. However, if you want to do file upload you must use the encoding type multipart/form-data to ensure that your files will be transferred correctly.
• accept (obsolete in HTML5)
  This is a list of the MIME types that the server will accept.
• accept-charset
  This is a list of the character sets that the server will accept.

Plus there are some new and changed attributes in HTML5:

• name
  This attribute changed in HTML5 to be included in the FORM element as the name portion of a name/value pair used for form submissions.
• novalidate
  The novalidate attribute is new in HTML5 and indicates that the form should not be validated by the browser during submission. This will not affect scripts that you set on the form to validate the data, only on the browser itself doing validation.
• target
  In HTML5 you can now set the target attribute of a form to have any results page open in a different frame or window. This attribute works the same way you would target an iframe.
• autocomplete
  The autocomplete attribute is new in HTML5. It specifies whether the browser should store form data and then complete form fields as the user types. Like the novalidate attribute, this attribute does not affect autocomplete functions you have added with scripts, only what the browser would do by default.

As with every other HTML element, the FORM element uses the global attributes and event attributes as well.

This article is part of the HTML Forms Tutorial