Input Form Attributes in HTML with Examples

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

The form Attribute in HTML

Using the form attribute, we can specify which input element corresponds to which form. The value of the input form attribute must be similar to the id attribute of the corresponding <form> element.

In the example below we have created one simple login form. As you can notice we have placed the login button outside the form element but still it works perfectly fine. Because we have used the form attribute inside the input element to link the input element with the form element.

The value of form id and input form attribute must be similar.
<form action=”demo.html” id=”loginform”>
<input type=”submit” value=”Log in” form=”loginform”>

For better understanding, please have a look at the below example.

<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;}
form{
padding:25px;
background-color:slateblue;
color:white;}
input{
border:none;
background-color:#dedede;
padding:5px;}
</style>
<body>

<h1>The input form attribute</h1>

<form action="demo.html"  id="loginform">
  <label for="email">Enter your email:</label><br>
  <input type="email" id="email" name="email" required><br><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password" required><br><br>  
</form>
   <br>
  <input type="submit" value="Log in" form="loginform">
</body>
</html>

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

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. The input form action attribute is given more priority than the action attribute of the form element. That’s why the form action value is given a higher preference than the value of the form element action attribute.

<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;}
form{
padding:25px;
background-color:mediumseagreen;
color:white;}
input{
border:none;
background-color:#dedede;
padding:5px;}
</style>
<body>

<h1>The input formaction attribute</h1>
<form action="demo.html"  id="loginform">
  <label for="uname">Enter your username:</label><br>
  <input type="text" id="uname" name="uname" required><br><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password" required><br><br>
  <input type="checkbox" value="remember me"><label>Remember me</label><br><br>
     <input type="submit" value="Log in" formaction="demo2.html">
</form>
</body>
</html>

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

The form enctype Attribute in HTML

With the enctype attribute, we can specify the encoding type for our Html form. There are three different values for the enctype attribute. The input form enctype attribute is given more priority than the enctype attribute of the form element and it overrides the value of the form element enctype attribute.

<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;}
form{
padding:25px;
background-color:mediumseagreen;
color:white;}
input{
border:none;
background-color:#dedede;
padding:5px;}
</style>
<body>

<h1>The input formenctype attribute</h1>
<form action="demo.html">
  <label for="uname">Enter your name:</label><br>
  <input type="text" id="uname" name="uname" required><br><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required><br><br>
  <label for="bdate">Birthdate:</label><br>
  <input type="date" id="bdate" name="bdate" required><br>
  <p>Select Your Favourite color</p>
  <input type="color"><br><br>
     <input type="submit" value="Submit">
      <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</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. The form method attribute works with images and submit

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.

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.

Example

<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;}
form{
padding:25px;
background-color:salmon;}
input{
border:none;
background-color:#dedede;
padding:5px;}
</style>
<body>

<h1>The input formmethod attribute</h1>

<form action="demo.html">
  <label for="fname">Full Name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="age">Age</label><br>
  <input type="text" id="age" name="age"><br><br>
  <label for="cname">Country</label><br>
  <input type="text" id="cname" name="cname"><br><br>
  <input type="submit" formmethod="get" value="Get">
</form>
<br>
<form action="demo.html">
  <label for="fname">Full Name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="age">Age</label><br>
  <input type="text" id="age" name="age"><br><br>
  <label for="cname">Country</label><br>
  <input type="text" id="cname" name="cname"><br><br>
  <input type="submit" formmethod="post" value="Post">
</form>
</body>
</html>

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

The form novalidate Attribute in HTML

When a user enters data inside an input field it gets validated before submitting if there is no validation whatever a user enters will be submitted as it is. The input form novalidate attribute is given more priority than the novalidate attribute of the form element and it overrides the value of the form element novalidate attribute.

In the example below we have created a form with two submit buttons. In the second submit button we have defined the form novalidate attribute which overrides the default value and submits the form without validation.

<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;}
form{
padding:25px;
background-color:salmon;}
input{
border:none;
background-color:#dedede;
padding:5px;}
</style>
<body>

<h1>The input formnovalidate attribute</h1>

<form action="demo.html">
  <label for="fname">Full Name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="age">Age</label><br>
  <input type="text" id="age" name="age"><br><br>
  <label for="cname">Country</label><br>
  <input type="text" id="cname" name="cname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate" value="Submit without validating">
</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. 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

<input type=” submit ” formtarget=”_blank”>

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.

The input form target attribute is given more priority than the target attribute of the form element and it overrides the value of the form element target attribute.

In the example below we have created a form with two submit buttons. In the second submit button we have defined the form target attribute which overrides the value of target from self to blank and submits the form in a new tab.

<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;}
form{
padding:25px;
background-color:dodgerblue;}
input{
border:none;
background-color:#dedede;
padding:5px;}
</style>
<body>

<h1>The input formtarget attribute</h1>

<form action="demo.html">
  <label for="fname">Full Name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="cname">Country</label><br>
  <input type="text" id="cname" name="cname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formtarget="_blank" value="Submit to a new tab">
</form>
</body>
</html>

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

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