1. What are HTML Form Attributes?
Since the HTML5 attributes are a vital component of HTML markup or we can say specifically to HTML tags or elements. Similarly, there are a number of HTML attributes that are particularly associated with an HTML5 form element. These HTML5 attributes enhance the abilities of HTML form controls in various ways to undergo different tasks. In this tutorial, we will go through the list of all the HTML attributes specified for the HTML5 <form> element and further relate it to its control tags.
2. All HTML Form Attributes
The below table comprises all the HTML5 attributes that works merely for HTML <form> element. These <form> realated attribute and their descriptions are listed in alphabetical order and serve as an ultimate and up-to-date guide and reference.
| Form Attribute | Description |
| Global Attributes | The HTML <form> element accepts all the global attributes. |
| accept | This HTML accept attribute was used to tell the browser about the types of files that a form can accept from the user. However, its usage is now discouraged and hence it is deprecated. |
| accept-action | The HTML accept-charset attribute informs the browser about the character set of submitted data. Basically, it sets the character encoding type that tells the browser about the data type. |
| action | The action HTML attribute contains a URL that is helpful to collect or process the form data that we submit. |
| alink | Previously, the alink HTML form attribute was used to define the color or the link when somebody selects the link or it is active; however, its use is now obsolete and deprecated. |
| autocapitalize | The autocapitalize attribute is useful to make the text data in capital letters when a user types in the input fields in an HTML form. |
| autocomplete | This autocomplete attribute when active provides some suggestions to the user when he/she clicks on the form input fields. The suggestions are based on previous input data. |
| enctype | The encoding of the data type is set with the help of this enctype HTML attribute, but it only works when we submit the form by post method. |
| method | This method attribute defines the HTTP method for submitting the form data to the server. |
| name | Since the HTML forms and their controls are named elements, therefore we set the name of different tags and the parent <form> element by using this name attribute. |
| novalidate | The validation of data is avoided upon submitting the form when this novalidate attribute is set. |
| onreset | This HTML attribute triggers some script or action when we reset the form with the reset button. |
| onsubmit | To trigger some script or action while we submit the form, we utilize this HTML attribute. |
| rel | We incorporate this rel attribute to impart some information about the linked resources attached to the current form. |
| target | We can set some target position to submit the form data; so, the data is submitted either: in the same window, in the parent window, in a new tab, in a new window, or where else we direct an HTML form by employing this attribute. |
3. HTML5 <form> Attribute Usage
The utilization of HTML5 form attributes is really similar and alike to others. We simply incorporate the attribute and its quoted value inside the initial or starting tag i.e. the <form>. Let's discern this with the below example.
Attribute's Usage
<form method="GET" action="/form-submit/"> <!-- Form controls are here --> </form>
4. Important Attributes of HTML Form
The above table lists all the attributes that we can exert into an HTML form; however, there are certain of them that are vital or important regardless of others. These are also necessary as the working and submission of form data are based upon them. Therefore, we must add them in order to properly submit the form data to the backend server or database. These important HTML form attributes are below.
- HTML Form action Attribute
- HTML Form method Attribute
3.1. Importance of action Attribute
- An HTML form requires the action attribute to submit the form data to the server or database.
- This action attribute contains a target URL that collects and processes the data.
- However, if there is no action attribute present, then the <form> will not know where to send the user data.
- Importantly, the action attributes accept a single URL or a relative URL only.
- Moreover, if the attribute is missing or has no URL specified, then it will send the user data to the current URL of the page.
3.2. Importance of method Attribute
- The method attribute is another important attribute in HTML forms.
- It defines the method to send the user data by either the GET or POST method.
- Furthermore, if no method attribute is declared, then the form will automatically utilize the GET value.
- However, the get method sends the user data exposed in the URL of the browser.
- This is sometimes risky and we the developers feel harmful and unsafe from the hackers; thus, we incorporate the post method, which does not reveal or disclose the user input in the browser.
- Consider the following image and watch closely the URL in which you can easily witness the user data submitted by the get method.
- Thus, the first name, last name, and even password of the user are exposed in the URL.
