HTML Forms


In order to group input elements and submit data, HTML uses a form element to encapsulate input and submission elements. These forms handle sending the data in the specified method to a page handled by a server or handler. This topic explains and demonstrates the usage of HTML forms in collecting and submitting input data.


  • <form method="post|get" action="somePage.php" target="_blank|_self|_parent|_top|framename">


Attribute                  Description
accept-charsetSpecifies the character encodings that are to be used for the form submission.
actionSpecifies where to send the form-data when a form is submitted.
autocompleteSpecifies whether a form should have autocomplete on or off.
enctypeSpecifies how the form-data should be encoded when submitting it to the server (only for method="post").
methodSpecifies the HTTP method to use when sending form-data (POST or GET).
nameSpecifies the name of a form.
novalidateSpecifies that the form should not be validated when submitted.
targetSpecifies where to display the response that is received after submitting the form.


The <form> element represents a section that contains form-associated elements (e.g. <button> <fieldset> <input> <label> <output> <select> <textarea>) that submits information to a server. Both starting (<form>) and ending (</form>) tags are required.


The Action Attribute

The action attribute defines the action to be performed when the form is submitted, which usually leads to a script that collects the information submitted and works with it. if you leave it blank, it will send it to the same file

<form action="action.php">

The Method Attribute

The method attribute is used to define the HTTP method of the form which is either GET or POST.

<form action="action.php" method="get">
<form action="action.php" method="post">

The GET method is mostly used to get data, for example to receive a post by its ID or name, or to submit a search query. The GET method will append the form data to the URL specified in the action attribute.

The POST method is used when submitting data to a script. The POST method does not append the form data to the action URL but sends using the request body.

To submit the data from the form correctly, a name attribute name must be specified.
As an example let's send the value of the field and set its name to lastname:

<input type="text" name="lastname" value="Mouse">

More attributes

<form action="action.php" method="post" target="_blank" accept-charset="UTF-8" 
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>

<!-- form elements -->


Target attribute in form tag

The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

The target attribute defines a name of, or keyword for, a browsing context (e.g. tab, window, or inline frame).

From Tag with a target attribute:

<form target="_blank">

Attribute Values

Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the same frame (this is default)
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe

Note: The target attribute was deprecated in HTML 4.01. The target attribute is supported in HTML5.

Frames and framesets are not supported in HTML5, so the _parent, _top and framename values are now mostly used with iframes.

Uploading Files

Images and files can be uploaded/submitted to server by setting enctype attribute of form tag to multipart/form-data. enctype specifies how form data would be encoded while submitting to the server.


<form method="post" enctype="multipart/form-data" action="upload.php"> 
    <input type="file" name="pic" />
    <input type="submit" value="Upload" />

Grouping a few input fields

While designing a form, you might like to group a few input fields into a group to help organise the form layout. This can be done by using the tag . Here is an example for using it.

For each fieldset, you can set a legend for the set using the tag LEGEND TEXT


     <legend>1st field set:</legend>
     Field one:<br>
     <input type="text"><br>
     Field two:<br>
     <input type="text"><br>
     <legend>2nd field set:</legend>
     Field three:<br>
     <input type="text"><br>
     Field four:<br>
     <input type="text"><br>
  <input type="submit" value="Submit">


The result for the above code

Browser Support

Chrome, IE, Edge, FireFox, Safari and Opera's latest versions also supports the tag