form element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The form element inserts a component designed to contain controls that users can interact with to send information back to the server. This element is commonly used to gather information from the visitors of a website, like preferences, comments, opinions and a lot more. It's also very important in the process of login some websites provide.

Of all its attributes, two have greater importance and are usually employed: action and method. The action attribute indicates the location of the script that will process the information sent by the browser, when the form is submitted. This script is written in any server-side language and is supposed to be prepared to receive and process the form's data.

In the other hand, the method attribute indicates how the browser should attach the form's data to the request. It's recommended to use the POST method because it conceals the information sent and allows binary data to be transmitted. Nevertheless, some specific situations may require the use of the GET method.

Apart from this and a few other attributes, form is just a container for many other elements, most of them representing a wide variety of controls. These elements are listed below:

  • button: a button that, when pressed, can perform different actions depending on its type attribute. Its variants are:
    • submit: submits the form to the processing agent.
    • reset: resets all the controls in the form to their default values.
    • button: performs no action.
    • menu: shows a menu.
  • fieldset: groups thematically a set of controls.
  • input: one of many controls according to the value of the attribute type. These are:
    • hidden: a hidden control used to send information to the server, typically managed by scripts.
    • text: a control used to input a single-line piece of text.
    • search: same as text but for search purposes.
    • tel: a control used to provide a telephone number.
    • url: a text box used to input a single and absolute URL.
    • email: a control designed to edit one or more e-mail addresses.
    • password: a text box for editing passwords, where the characters are represented by dots.
    • datetime: a control to input a specific global date and time.
    • date: a control to input a specific date.
    • month: a control to input a specific month.
    • week: a control to input a specific week.
    • time: a control to input a specific time.
    • number: a control to input a number.
    • range: a control to input one or two numbers inside a range.
    • color: a control to input a color.
    • checkbox: a control to input a boolean value (true/false).
    • radio: a control used to choose one single option among many.
    • file: a control used to upload files to the server.
    • submit: a button used to submit the form.
    • image: same as submit but with the ability to be shown as an image instead of using the default button appearance.
    • reset: a button used to reset the form's controls to their default values.
    • button: a button with no default action associated.
  • keygen: a control used to generate a public/private key pair.
  • label: an element used to provide a caption for controls in the form.
  • object: an object representing and image, that can be used as a client side image map.
  • output: an element used display the result of a calculation performed by the page, or the result of a user action, based on the controls of the form.
  • select: a control used to select one or more options from a list.
  • textarea: a control used to input a piece of text consisting of one or more lines.
  • img: an image that can be used as a client side image map.

When used properly, specially since HTML5 begun to be adopted, forms are a powerful tool that enable authors not only to collect very valuable information from the users, but also to develop complex applications, capable of recollecting and processing very specific information in many different ways.

The name attribute of this element has been removed from previous versions of the standard. HTML5 has reinstated it to let authors reference the form by its name within the forms collection.

The accept attribute of this element has been removed from HTML5 for being redundant. Authors should use the accept attribute in controls instead.

Examples

In the following examples, we'll see some of the attributes of the form element along with some controls. To get detailed information about the controls I suggest you visit the reference specific for each element.

Our first example defines a basic login form with just three elements: a text input, a password input and a submit button. The attributes action and method indicate, resepctively, the location of the script responsible for the processing of the form's data and the method used to send that data.

The target attribute in the form will make the results show in a new window/tab. The page that will show the results has been specifically designed to make clear the mechanims of forms. It's written in a server-side language, and will be processed by the server before it's shown.

<form action="../../form-result.php" method="post" target="_blank">
  <p>Username: <input type="text" name="user"></p>
  <p>Password: <input type="password" name="pass"></p>
  <p><input type="submit" value="Send data"></p>
</form>

Username:

Password:

In our second example, we'll be adding more controls to our form (a couple of radio buttons and three check boxes). We'll also provide a reset button, so you can play a little with the controls, changing their values and resetting them later with the button.

Furthermore, we'll make use of the label element. With this element, we can associate a run of text to a control. The most basic way of using it is enclosing both, the text and the control, between its start and end tags.

<form action="../../form-result.php" method="post" target="_blank">
  <p><label>Full name: <input type="text" name="fullname"></label></p>
  <p>Gender:
    <label><input type="radio" name="gender" value="male"> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>
  </p>
  <p><label>Address: <input type="text" name="address"></label></p>
  <p>Interests:
    <label><input type="checkbox" name="books"> Books</label>
    <label><input type="checkbox" name="movies"> Movies</label>
    <label><input type="checkbox" name="videogames"> Videogames</label>
  </p>
  <p><input type="submit" value="Send data"> <input type="reset" value="Reset form"></p>
</form>

Gender:

Interests:

In the next example, we're altering the previous form a little so we can have some of the new controls in HTML5: a date picker, a phone number input and a color picker. Also, we'll group controls thematically using the fieldset element.

Browser support for new controls in HTML5 is incomplete. In most cases, unsupported elements fallback to text inputs reason why authors shouldn't rely on the validity of these fields' data.

Note that in this case, we're using the value "GET" for the method attribute, just for a change. This will let you see, when the new window is open with the form's results, the name/value pairs in the URL in the address bar of your browser. You'll se something like this: "?fullname=john&birthdate=15/10/2002&...".

<form action="../../form-result.php" method="get" target="_blank">
  <fieldset>
    <legend>Basic information</legend>
    <p><label>Full name: <input type="text" name="fullname"></label></p>
    <p><label>Birth date: <input type="date" name="birthdate"></label></p>
    <p>Gender:
      <label><input type="radio" name="gender" value="male"> Male</label>
      <label><input type="radio" name="gender" value="female"> Female</label>
    </p>
    <p><label>Address: <input type="text" name="address"></label></p>
    <p><label>Phone number: <input type="tel" name="phone"></label></p>
  </fieldset>
  <fieldset>
    <legend>Extra information</legend>
    <p>Interests:
      <label><input type="checkbox" name="books"> Books</label>
      <label><input type="checkbox" name="movies"> Movies</label>
      <label><input type="checkbox" name="videogames"> Videogames</label>
    </p>
    <p><label>Favorite color: <input type="color" name="favoritecolor"></label></p>
  </fieldset>
  <p>
    <input type="submit" value="Send data">
    <input type="reset" value="Reset form">
  </p>
</form>
Basic information

Gender:

Extra information

Interests:

Lastly, we'll create a form with file upload. In this case we must pay special attention to a couple of attributes: first the method attribute, that can only have the "POST" value, as it's the only method that can transfer binary data; and second, the enctype attribute, that should have the value "multipart/form-data". If this configuration isn't respected, file upload won't be possible.

Also, our form will need a file upload input to allow users to select the file they want to upload from disk.

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p><label>File: <input type="file" name="ufile"></label> <input type="submit" value="Send data"></p>
</form>

Attributes

Specific attributes

accept-charset

A casi-insentive version of the string UTF-8. Forms are required to send their information in with this codification.

Example

<form action="process.php" accept-charset="utf8">

action

A URI indicating the location of the script responsible for the manipulation of the data sent by the form. This script is usually written in a server-side language like ASP, PHP, Python, etc.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>Some text: <input type="text" name="sometext"> <input type="submit" value="Send data"></p>
</form>

Some text:

autocomplete

One of two values indicating the browser if it should automatically suggest options for input controls, as an attempt to guess what the user is typing. Browsers usually perform this action by retrieving data from a database containing previous inputs. There are two possible values, both case-insensitive:

  • on: the browser should suggest options automatically. This is the default value.
  • off: the browser musn't suggest options automatically.

Example

<form action="../../form-result.php" method="post" target="_blank" autocomplete="off">
  <p>Some text: <input type="text" name="sometext"> <input type="submit" value="Send data"></p>
</form>

Some text:

enctype

A value indicating the encoding method to be used for data when the form is submitted. There are three possible case-insensitive values:

  • application/x-www-form-urlencoded: spaces are replaced with plus signs ("+") and special characters are converted to HEX values. This is the default value.
  • multipart/form-data: no encoding is performed. This value is necessary for file uploads.
  • text/plain: only spaces are replaced by plus signs ("+").

Remember you must use the value "multipart/form-data" whenever a file is going to be uploaded in the form. Without this configuration, file uploads will fail.

Example

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p><label>File: <input type="file" name="ufile"></label> <input type="submit" value="Send data"></p>
</form>

method

The method browsers should use to send the form's data. There are three possible case-insensitive values:

  • get: data is attached to the URL of the request (the one provided in the action attribute). The name-value pairs are arranged in the form "name=value" and separated each other with an ampersand sign ("&"). All this string is appended to the request URL preceded by a question mark ("?"). For example, a GET string could be: "form-result.php?user=john&pass=123456"
  • post: data is attached to the body of the request.
  • dialog: specific for forms inside a dialog element. Instructs the browser to close the dialog box upon form submission. Form results should be handled by scripts.

Example

<form action="../../form-result.php" method="get" target="_blank">
  <p>Username: <input type="text" name="user"></p>
  <p>Password: <input type="password" name="pass"></p>
  <p><input type="submit" value="Send data"></p>
</form>

Username:

Password:

name

A name to represent the form within the forms collection. This value can't be the empty string and must be unique among other forms names.

This attribute has been removed from previous versions of the standard. HTML5 has reinstated it to let authors reference the form by its name within the forms collection.

Example

<form name="userdata" action="result.php">

novalidate

A boolean value instructing the browser not to validate the form's data upon submission. If this attribute takes the value "novalidate" or the empty string (""), or if it's just present, the browser should omit the form's validation.

Example

<form action="result.php" novalidate>

target

A value specifiyng where the results of the script in charge of processing the data should be loaded. This value can be a browsing-context name (like the value of the name attribute of an iframe) or any of the following values (case-insensitive):

  • _blank: in a new window/tab.
  • _parent: in the immediate parent context.
  • _self: in the same context that's containing the form.
  • _top: in the topmost context (the greatest parent context containing the form).

The target attribute was deprecated in previous versions of HTML, but it's been reinstated in HTML5 as it becomes useful in combination with the iframe element.

Example

<form action="../../form-result.php" target="_blank">
  <p>Some text: <input type="text" name="sometext"></p>
  <p><input type="submit" value="Send data"></p>
</form>

Some text:

rel

An unordered set of unique space-separated list of link types, indicating the meaning that the linked resource has for the current document (the one containing the form). This attribute may take the following values:

  • external: the linked resource isn't part of the same site as the current document.
  • help: a link to context-sensitive help.
  • license: a description of a copyright license that covers the main content of the current document.
  • next: the next document in a series of documents.
  • nofollow: the current document's original author or publisher does not endorse the referenced document.
  • noopener: indicates that any browsing context created by following the link to disown its parent.
  • noreferrer: indicates the browser not to send information about the referer (current document) when the link is followed.
  • opener: forces the browser to send information about the parent of a new browsing context created by the element. This value is useful, for example, to prevent the default behavior in links that open in new browsing contexts (with _blank value in their taget attribute)
  • prev: the previous document in a series of documents.
  • search: a link to a resource that can be used to search through the current document and its related pages.

Example

<form action="http://www.another-server.com/receive-submission.php" method="post" rel="external">

accept

A space and/or comma separated list of content types (or Internet media types) that the processing agent is suposed to handle correctly. This could be useful when uploading files, for example, to filter on the client side, types that the processing agent won't be able to handle.

The accept attribute of this element has been removed from HTML5 for being redundant. Authors should use the accept attribute in controls instead.

Example

<form action="store.php" method="post" enctype="multipart/form-data" accept="image/gif image/jpeg image/png">

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.