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.
Syntax[edit | edit source]
<form method="post|get" action="somePage.php" target="_blank|_self|_parent|_top|framename">
Parameters[edit | edit source]
|AttributeÂ Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â||Description|
||Specifies the character encodings that are to be used for the form submission.|
||Specifies where to send the form-data when a form is submitted.|
||Specifies whether a form should have autocomplete on or off.|
||Specifies how the form-data should be encoded when submitting it to the server (only for method="post").|
||Specifies the HTTP method to use when sending form-data (POST or GET).|
||Specifies the name of a form.|
||Specifies that the form should not be validated when submitted.|
||Specifies where to display the response that is received after submitting the form.|
Remarks[edit | edit source]
<form>Â elementÂ representsnts a section that contains form-associated elements (e.g.
<textarea>) that submits information to a server. Both starting (
<form>) and ending (
</form>) tags are required.
Submitting[edit | edit source]
The Action Attribute[edit | edit source]
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
The Method Attribute[edit | edit source]
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[edit | edit source]
<form action="action.php" method="post" target="_blank" accept-charset="UTF-8" enctype="application/x*www*form*urlencoded" autocomplete="off" novalidate> <!** form elements --> </form>
Target attribute in form tag[edit | edit source]
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:
|_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[edit | edit source]
Images and files can be uploaded/submitted to server by setting
enctype attribute of
form tag to
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" /> </form>
Grouping a few input fields[edit | edit source]
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
<form> <fieldset> <legend>1st field set:</legend> Field one:<br> <input type="text"><br> Field two:<br> <input type="text"><br> </fieldset><br> <fieldset> <legend>2nd field set:</legend> Field three:<br> <input type="text"><br> Field four:<br> <input type="text"><br> </fieldset><br> <input type="submit" value="Submit"> </form>
Chrome, IE, Edge, FireFox, Safari and Opera's latest versions also supports the tag