HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Forms

Run code

HTML Forms are one of the main points of interaction between a user and a web site. They allow users to send data to the web site, for example, during user registration you would like to collect information such as name, email address, password, etc.


HTML <form> Element

The HTML <form> element is used to create an HTML form and it has following syntax:

<form action="Script URL" method="GET|POST">
   form elements like input, textarea etc...
</form>

There are various form elements available like input fields, textarea fields, drop-down menus, checkboxes, submit button, etc.


HTML <input> Element

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on the type attribute.

Run code

You will learn a lot more about input types later in this tutorial.


HTML Forms - The Action Attribute

The action attribute defines the location (URL) where the form's collected data should be sent when it is submitted.

Generally, the form data is sent to a web page on the server when the user clicks on the submit button.

In the example below, the form data is sent to a page on the server called "/form-action.php". This page contains a server-side script that handles the form data:

Run code

If the action attribute is omitted, the action is set to the current page.



HTML Forms - The Target Attribute

The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window.

The following example displays the response received in a new window:

Run code

The default value is _self which means the form will be submitted in the current window.


HTML Forms - The Name Attribute

The name attribute is used to give a name to the element which is sent to the server to be recognized and get the value.

If no name is specified or it is empty, the control's value is not submitted with the form.

This example will only submit the "Message" input field:

Run code

HTML Forms - The Method Attribute

The method attribute defines which HTTP method to send the data with (it can be "GET" or "POST").

The following example submits a form using the "GET" method:

Run code

The following example submits a form using the "POST" method:

Run code

When to Use GET?

In GET method the browser will add the form contents (name/value pairs) to the end of the URL. This is the default method.

http://example.com/filter.php?name1=value1&name2=value2

GET is generally used for simple forms where security is not a concern. GET offers a number of advantages for simple forms.

  • GET requests can be cached
  • GET requests remain in the browser history
  • GET requests can be bookmarked
  • GET requests should never be used when dealing with sensitive data
  • GET requests have length restrictions (only 2048 characters)

When to Use POST?

In POST method contents are not displayed in the URL. You should always use POST if the form data contains sensitive or personal information.

The data sent to the server with POST is stored in the request body of the HTTP request.

POST /filter.php HTTP/1.1
Host: example.com
name1=value1&name2=value2
  • POST requests are never cached
  • POST requests do not remain in the browser history
  • POST requests cannot be bookmarked
  • POST requests should be used when dealing with sensitive data
  • POST requests have no restrictions on data length

You can learn more about HTTP method in our HTTP method tutorial.


Grouping Form Data using <fieldset>

The <fieldset> element is used to group related data in a form.

The <legend> element represents a caption for the content of its parent <fieldset>.

Run code

HTML Form Attributes

Below is a list of some attributes often used with HTML Forms:

Attribute Description
action Specifies where to send the form-data when a form is submitted
autocomplete Indicates whether controls in this form can by default have their values automatically completed by the browser
enctype Defines the content type of the form date when the method is POST
method Defines which HTTP method to use when submitting the form. Can be GET (default) or POST
name Specifies the name of the element. For example used by the server to identify the fields in form submits
novalidate Indicates that the form shouldn't be validated when submitted
target Indicates where to display the response that is received after submitting the form. Default is _self