HTML Input Form Attributes

The html input form attributes are written in input element having input type submit or sometimes also used with input type image. Lets see the input form attributes below:

Input Form Attributes:

Attribute	Description
form	Defines the form that the input element belongs to.
formaction	Defines the url of file which will process the input when the form will submit.
formenctype	Defines that how the form data should encoded when form is submitted.
formmethod	Defines the method for sending the form data.
formtarget	Specifies that where to display the form response when the form is submitted.
formnovalidate	Specifies that input element should not validated on form submission.

Note: The above attributes are not written within <form> tag. They are used in <input type=”submit”>

Form Attribute

The form attribute defines the form that the input element belongs to. The form attribute can be used with different input types.

The value of form attribute should be same the value of id attribute of the particular form to which the input element belongs.

<form action="formoutput.html" id="mainform">
  <label for="un">Enter Username:</label><br>
  <input type="text" id="un" name="un" value="" size="50" required ><br>
  <input type="submit" value="Submit">
</form>

<p>The "password" field below is outside the form element, but still part of the form.</p>

<label for="pass">Password:</label><br>
<input type="password" id="pass" name="pass" value="" size="10" maxlength="8" required form="mainform"><br><br>

Formaction Attribute

The formaction attribute defines the url of file which will process the input when the form will submit. This attribute is used with input type submit and image.

Note: The value of this attribute overwrites the value written in action attribute of form element.

<form action="formoutput.html" method="get" target="_blank">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formaction="post.php" formmethod="post" value="Submit using POST">
</form>

First name:
Last name:

Formenctype Attribute

The formenctype attribute defines that how the form data should encoded when form is submitted. This attribute is used only with those form elements using method= “post”. This attribute is used with input type submit and image.

Note: The value of this attribute overwrites the value written in enctype attribute of form element.

Before moving to example lets go through the values of formenctype below:

Value	Description
multipart/form-data	Data is not encoded in this it value is used for forms that have file upload control.
text/plain	In this spaces are converted into “+” but no special character is encoded.
application/x-www-form-urlencoded	All values are encoded (spaces are converted into “+” and special characters are encoded in ASSCI/HEX values).

<form action="post.php" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">
</form>

Formmethod Attribute

The formmethod attribute defines the http method for sending the form data to action URL. This attribute is used with input type submit and image. The form data can be sent using both post or get method.

Note: The value of this attribute overwrites the value written in method attribute of form element.

<form action="formoutput.html" method="get" target="_blank">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formaction="post.php" formmethod="post" value="Submit using POST">
</form>

First name:

Last name:

Note: You can use these attribute solely as well.

Formtarget Attribute

The formtarget attribute specifies that where to display the form response when the form is submitted. This attribute is used with input type submit and image.

Note: The value of this attribute overwrites the value written in target attribute of form element.

<form action="formoutput.html">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formtarget="_blank" value="Submit a new tab">
</form>

First name:

Last name:

Formnovalidate Attribute

The formnovalidate attribute specifies that input element should not validated on form submission. This attribute is used with input type submit and.

Note: This attribute overwrites novalidate attribute of form element.

<form action="/formoutput.html">
  <label for="un">Enter Username:</label><br>
  <input type="text" id="un" name="un" value="" size="50" required ><br>
  <label for="pass">Password:</label><br>
  <input type="password" id="pass" name="pass" value="" size="10" maxlength="8" required><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
</form>

Enter Username:

Password:

For getting the idea that how  these attribute are actually working try the above examples.