Form Attributes in HTML with Examples

In this article, I am going to discuss Form Attributes in HTML with Examples. Please read our previous article where we discussed Forms in HTML with Examples. At the end of this article, you will learn everything about HTML Form Attributes with Examples.

The Form Action Attribute in HTML

Inside the Form element, the action attribute is used to define where to send the form data when a user submits a form.

< form action=” URL “>

URLs are used to specify the destination where the data needs to be sent after the submission. There are two types of URLs: absolute URL and relative URL. In absolute URLs form data is sent to another website, for example, www.xyz.com. In relative URL form data is sent to a file within the webpage for example demo.html.

In the below example when a user will click on submit button then the form data will be sent to the demo.html page. For better understanding, please have a look at the below example.

<!DOCTYPE html>
<html>
<body>

<h2>HTML Form Action</h2>

<form action="demo.html">
  <label for="fname">Full Name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  
  <label for="gender">Gender:</label><br>
  <input type="text" id="gender" name="gender"><br>
  
  <label for="cno">Contact No</label><br>
  <input type="text" id="cno" name="cno"><br><br>
  
  <input type="submit" value="Submit">
  
</form> 

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

The Form Target Attribute in HTML

Target attributes are used to specify where to display the form data which we have got from users. We have learned about target attributes earlier in Html Links and Images articles.

By default, the value of the target attribute is _self. When the value of the target attribute is self, it will display the data in the same window. The Target attribute has four values

In _self, the form data is displayed in the same window.
In _blank, the form data is displayed in a new tab.
In _parent, the form data is displayed in the parent frame.
In _top, the form data is displayed in the entire body of the window.

We can also display form data in an iframe by using the name attribute. In the below example we have set the value of the target attribute to blank so when a user will click on the submit button the data will be displayed in a separate window. For better understanding, please have a look at the below example.

<!DOCTYPE html>
<html>
<body>
<h2>HTML Form Target</h2>
<form action="demo.html" target="_blank">
  <label for="cname">College Name:</label><br>
  <input type="text" id="cname" name="cname"><br>
  <label for="branch">Branch:</label><br>
  <input type="text" id="branch" name="branch"><br>
  <label for="sno">Seat No</label><br>
  <input type="text" id="sno" name="sno"><br><br>
    <input type="submit" value="Submit">
 </form> 
</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

The Form Method Attribute in HTML

There are two methods used to submit the form data GET and POST. The Html method attribute is used to define the HTTP method while submitting the form data. By default, the value of the HTML method attribute is GET.

GET

<form action=”demo.html” method=”get”>

The GET method is often used to append form data to a URL in the form of a name/value pair. The length of the URL will remain limited if you use GET. It enables users to submit bookmark results. GET is preferable for data that does not require any security. For better understanding, please have a look at the below example.

<!DOCTYPE html>
<html>
<body>

<h2>HTML GET Method</h2>

<form action="demo.html" target="_blank" method="get">
  <label for="cname">College Name:</label><br>
  <input type="text" id="cname" name="cname"><br>
  
  <label for="sname">Student Name:</label><br>
  <input type="text" id="sname" name="sname"><br>
  
  <label for="email">Email Id</label><br>
  <input type="email" id="email" name="email"><br><br>
  
  <input type="submit" value="Submit">
  
</form> 

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

POST

<form action=”demo.html” method=”post”>

The values are not visible in the URL while using the POST method. Because POST values are submitted via the HTTP body, there is no limit to their length. This method accepts a variety of data types, including string, numeric, binary, and so on. For better understanding, please have a look at the below example.

<!DOCTYPE html>
<html>
<body>

<h2>HTML POST Method</h2>

<form action="demo.html" target="_blank" method="post">
  <label for="cname">College Name:</label><br>
  <input type="text" id="cname" name="cname"><br>
  
  <label for="sname">Student Name:</label><br>
  <input type="text" id="sname" name="sname"><br>
  
  <label for="email">Email Id</label><br>
  <input type="email" id="email" name="email"><br><br>
  
  <input type="submit" value="Submit">
  
</form> 

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

HTML Form EncType Attribute

With the Enctype attribute, we can specify the encoding type for our Html form. There are three different values for the enctype attribute.

If the enctype attribute is not specified, the default value is application/x-www-form-urlencoded. For the vast majority of simple HTML forms, this is the best option. If users are required to upload a file via the form, multipart/form-data is required.

text/plain is a valid option, it sends data without any encoding at all. text/plain converts spaces to + symbols but does not convert special characters. It is not recommended because its behavior is unpredictable. For better understanding, please have a look at the below example.

<!DOCTYPE html>
<html>
<style>
body{
display:flex;
height:100vh;
justify-content:center;
align-items:center;
flex-direction:column;}
h1 {
color:blue;
}
body {
 text-align:center;
}

</style>
<body>

<h2>HTML Enctype Attribute</h2>

<h1>Dot Net Tutorials</h1>
    <form action="demo.html" method="post"
   enctype="multipart/form-data">

 First name: <input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br>
    Address: <input type="text" name="Address"><br><br>
   <input type="submit" value="Submit">
            
 </form>
</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

The Form Autocomplete Attribute in HTML

In Forms, autocomplete is used to automatically fill the values which users have entered before. For example, if we have filled our name or email id on any website previously, the moment we click on the name and email input field it will automatically complete or suggest the name and email to the user.

We can change the value of autocomplete to “on” or “off” based on our requirements. For better understanding, please have a look at the below example.

<!DOCTYPE html>
<html>
<body>

<h2>HTML Autocomplete</h2>

<form action="demo.html" target="_blank" method="get" autocomplete="on">
  
  <label for="sname">Student Name:</label><br>
  <input type="text" id="sname" name="sname"><br>
  
  <label for="email">Email Id</label><br>
  <input type="email" id="email" name="email"><br><br>
  
  <input type="submit" value="Submit">
  
</form> 

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

The novalidate Attribute

When a user enters data inside an input field it gets validated before submitting if there is no validation whatever a user enter will be submitted as it is.

< form action=”demo.html” novalidate >

For example, consider we have one email input field for anything to be considered as an email it is necessary to end with @gmail.com

This one is correct: xyz@gmail.com

This one is not correct: xyzgmail.com

So. when a user enters a wrong email id browser will prompt to enter a valid email id.

When novalidate is off everything a user adds will be submitted without validation.

In the next article, I am going to discuss Form Elements in HTML with Examples. Here, in this article, I try to explain HTML Form Attributes with Examples and I hope you enjoy this HTML Form Attributes with Examples article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.