In HTML, each element has its own attributes that are used to define the characteristics of that particular HTML element and are placed inside the element’s opening tag. The <form> element also has attributes that provide different functionalities like redirection on other web pages and auto-completion of text.
Form Attributes
HTML form attributes provide different functionalities, such as redirection to other web pages, auto-completion of text, specifying data validation rules, controlling the behavior of form submissions, etc.
Following is a list of the most frequently used form attributes −
The action Attribute
The action attribute of the <form> element transmits the user’s input to a backend script for processing. A form is of no use unless it processes the information provided by the user. Therefore, it is important to pass the URL of a program to the action attribute. Note that the formaction attribute can override the value of the action attribute.
Example
The following example illustrates the use of the action attribute. When we click the submit button, the form will redirect us to the home page of Tutorialspoint:
<!DOCTYPE html><html><head><meta charset="utf-8"><title> The action Attribute </title></head><body><!-- Start of the form element --><form action = "https://www.tutorialspoint.com"><!-- to take input -->Name: <input type = "text" name = "your_name" required/><br><br> Email: <input type = "email" name = "mail" required/><br><br><!-- to submit the data --><input type = "submit"></form></body></html></pre>The method Attribute
The
methodattribute determines which HTTP method should be used by the browser while uploading the form information. The most commonly used methods are as follows:
S.No Values & Description 1 GETIt is the default method for form submission, which means if we don't specify the method name explicitly, the form will use the GET method to send data.2 POSTIt is used to send form data inside HTTP request body. It is safer than GET method.It is not recommended to use the GET method while sending sensitive information like credit/debit card numbers and passwords because it exposes the submitted data in the URL.
Example
The following example demonstrates how to use the method attribute of the
<form>element.<!DOCTYPE html><html><head><meta charset="utf-8"><title> The method Attribute </title></head><body><!-- Start of the form element --><form action = "https://www.tutorialspoint.com" method = "post"><!-- to take input -->Name: <input type = "text" name = "your_name" required/><br><br> Email: <input type = "email" name = "mail" required/><br><br><!-- to submit the data --><input type = "submit"></form></body></html></pre>On clicking the submit button, the user will be redirected to the home page of Tutorialspoint.
The target Attribute
The
targetattribute determines the target window or frame where the result of the script will be displayed after submitting the form. The default target is the current window. The target attribute accepts the following values:
S.No. Values & Description 1 _selfIt opens the response in the same frame as it was clicked.2 _blankIt opens the response in the new window or tab.3 _parentIt opens the response in the parent frame.4 _topIt opens the response in the full body of window.5 framenameIt opens the response in the named iframe.Example
In the following example, we will use the
targetattribute with the value_self. The response will be open in the current window:<!DOCTYPE html><html><head><meta charset="utf-8"><title> The target Attribute </title></head><body><!-- Start of the form element --><form action = "https://www.tutorialspoint.com" target = "_self"><!-- to take input -->Name: <input type = "text" name = "your_name" required/><br><br> Email: <input type = "email" name = "mail" required/><br><br><!-- to submit the data --><input type = "submit"></form></body></html></pre>The novalidate Attribute
The
novalidateis a Boolean attribute that indicates the form does not need any kind of validation. The term validation refers to the process of verifying the correctness of user input based on predefined conditions. This attribute, when applied, exempts the form from such checks, allowing user inputs to bypass these conditions.If Boolean attributes like novalidate are present on an HTML element, it specifies true, and in the case of absence, false is assumed. They do not accept any values.
Example
In the previous examples, the form redirected us to a new web page when we entered our name and email. For this example, we will use the novalidate attribute, which will allow the redirection without entering any information:
<!DOCTYPE html><html><head><meta charset="utf-8"><title> The novalidate Attribute </title></head><body><!-- Start of the form element --><form action = "https://www.tutorialspoint.com" target = "_blank" autocomplete="off" method = "get" novalidate><!-- to take input -->Name: <input type = "text" name = "your_name" required/><br><br> Email: <input type = "email" name = "mail" required/><br><br><!-- to submit the data --><input type = "submit"></form></body></html></pre>The autocomplete Attribute
The
autocompleteattribute of HTML predicts and suggests the subsequent input based on the initial characters entered in the input field. This attribute primarily has two states, namelyonandoff.
S.No. Values & Description 1 onBy default, the autocomplete attribute is set to on, enabling the autocomplete functionality.2 offThe autocomplete attribute can be toggled to off to disable this feature as per the requirements of the web application.Instance
<form action = "https://www.tutorialspoint.com" target = "_blank" autocomplete="off" method = "get">The enctype Attribute
We use the
enctypeattribute to specify how the browser encodes the data before it sends it to the server. Its possible values are −
S.No. Values & Description 1 application/x-www-form-urlencodedThis is the standard method most forms use in simple scenarios.2 mutlipart/form-dataThis is used when you want to upload binary data in the form of files like images, Word files etc.3 text/plainIt only encodes the spaces into + symbol.Instance
<form action = "https://www.tutorialspoint.com" target = "_blank" autocomplete="off" method = "get" enctype = "text/plain">
Leave a Reply