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.
| Attribute | Details |
|---|---|
| accept-charset | Specifies the character encodings that are to be used for the form submission. |
| action | Specifies where to send the form-data when a form is submitted. |
| autocomplete | Specifies whether a form should have autocomplete on or of |
| enctype | Specifies how the form-data should be encoded when submitting it to the server (only for method="post"). |
| method | Specifies the HTTP method to use when sending form-data (POST or GET). |
| name | Specifies the name of a form |
| novalidate | Specifies that the form should not be validated when submitted. |
| target | Specifies where to display the response that is received after submitting the form. |
<form action="action.php" method="post" target="_blank"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate></form>
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 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.
www.example.com/action.php?firstName=Mickey&lastName=Mouse
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">
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 | Details |
|---|---|
| _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.
The autocomplete attribute specifies whether a form should have autocomplete on or off.
When autocomplete is on ,the browser automatically suggest values based on values that user has entered earlier.
<h1>The form autocomplete attribute</h1>
<p>Fill in and submit the form, then reload the page, start to fill in the form again - and see how autocomplete works.</p>
<p>Then, try to set autocomplete to "off".</p>
<form method="post" action="form_action.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="firstName" required><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email" required><br><br>
<input type="submit">
</form>
Images and files can be uploaded/submitted to server by setting enctype attribute of form tag to multipart/formdata. enctype specifies how form data would be encoded while submitting to the server.
Example:
<<form method="post" enctype="multipart/form-data" action="upload.php">
<input type="file" name="pic" />
<input type="submit" value="Upload" />
</form>
Example:
Share TDB SCHOOL
Share this E-Learning Website on social media platforms with your friends and followers