The HTML Form Element

Form elements are probably one of the most important aspects of HTML that we come across when browsing the web. It allows communication between a client (more commonly known as the web browser) and a web server. Many of us have probably used forms at one time or another, such as when purchasing a book over the Internet, filling out product surveys or for web based email..

In this article we'll take a look at some of the more common attributes used for form elements and why it's necessary to use them. Next, we'll look at some of the children elements for Form elements which are known as controls. From there, we'll take a look at some common form submission issues.

What is the Form Element?

It's the section of the HTML document that may contain normal content, some markup, controls (or html element such as checkboxes, radio buttons, text fields, etc.) and labels on those controls.

A typical Form element may contain a variety of controls, and one or many controls on a given form.

A form element must have a start tag and an end tag, meaning all the controls will be between the form's open and close tags.

<form action=""> .... rest of the controls will go here </form>

Note: All of the controls that make up a full functional form can also appear outside of the form as well, but they function differently in either place.

Some Important Attributes

action : There are a number of attributes that are used in form elements, however a form element must always contain an action attribute. The action attribute points to a form processing application or mechanism (mostly a server side application). Action attribute values should be in the following format:

protocol : resource
such as
http://myformprocessing.jsp

A list of some valid protocols that can be used in action attributes are as follows:

  ftp                     File Transfer protocol
  http                    Hypertext Transfer Protocol
  gopher                  The Gopher protocol
  mailto                  Electronic mail address
  news                    USENET news
  nntp                    USENET news using NNTP access
  telnet                  Reference to interactive sessions
  wais                    Wide Area Information Servers
  file                    Host-specific file names
  prospero                Prospero Directory Service

method : By default, if no method attribute is specified, GET method is used. You can choose between GET and POST methods. When using GET method (uses enctype="application/x-www-form-urlencoded"), the browser application will append the form data to the url in the form control's (element) name=value format separating them with an & sign. Post is more of a discreet type, in that form data is created explicitly using the enctype attributes value [View a list of MIME Types].
enctype : Default value for enctype attribute is:

application/x-www-form-urlencoded

in the above enctype settings the form data is restricted to ASCII codes.

Another important enctype is:

multipart/form-data

The application/x-www-form-urlencoded is not suitable to send large quantities of data that may contain binary data or non-ascii characters. In situations where you are uploading files and/or other binary data, multipart/form-data content type should be used. Another important enctype that you might have used or will use in the future is text/plain. This content type value is used when you're submitting your form data using the mailto: protocol in the action attributes value. You might find that some people do not approve this usage, (but in my opinion, its perfectly valid enctype that can be used with a perfectly valid mailto protocol).

The only problem you that might encounter with the mailto protocol is that its implementation within the browser community is not as universal as one might think, hence problems may be experienced in different browsers when using the combination of action="mailto:...." and enctype="text/plain" (works as intended in IE6 and NS6+).

One more important configuration issue is that you must have an email client installed on your local system to use the above. i.e. MS Outlook or Netscape mail client.

Click here to see a detailed list of Form Element attributes