HTML Form input Attribute

In this article, we have mentioned all the important attributes associate with both <form> and <input> elements. Generally, the form attributes deal with the <input> element data types and their submission action. It is very important to know all the forms attributes because we need to mention some specific attribute for specific input types.

Form Attribute

<form action="/user.php" id="name_form">
   <label for="un">Username:</label>
   <input type="text" id="un" name="un">
   <input type="submit" value="Submit">
</form>

<!-- This input block is outside of form -->
<!-- By mentioning the form attribute now input unn is the part of name_form-->

<label for="uun">Update UserName:</label>
<input type="text" id="uun" name="uun" form="name_form">

Preview

Username:

Update UserName:

Formaction

formaction is the attribute of <input> element and it define the URL of the backend file which will process the input data when the user hits the submit button. if the <form action=""> element has an action attribute then formaction attribute of <input> will overwrite it.

Example

<form action="/userlogin.php">
  <label for="name">Username:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="pass">Password:</label>
  <input type="text" id="pass" name="pass"><br><br> 

   <input type="submit" value="Login as User">
  <input type="submit" formaction="/admin.php" value="Login As Admin">
</form>

Preview

Username:

Password:

Formenctype

The formenctype attribute defines how will be the form data get encoded when the user click on the submit button. This attribute will only work when the form method is "post". We mention this attribute with submit and image type <input> element.

Example:

<form method="post">
  <label for="un">Name</label>
  <input type="text" id="un" name="un"><br><br>
  <input type="submit" value="Save">
  <input type="submit" formenctype="multipart/form-data"
  value="Save as Encoded">
</form>

Output

  Name   

Formmethod

The formmethod attribute define which HTTP method should be followed when the user clicks on the submit button. If the <form> element already has a method attribute when formmethod attribute of <input> element would overwrite it.

Example

<form action="/save.php" method="get">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  <label for="age">Age:</label>
  <input type="text" id="age" name="age"><br>
  <input type="submit" value="Save(get)">
  <input type="submit" formmethod="post" value="Save(Post)">
</form>

Preview

Name:

Age:

Formtarget

f ormtarget is similar to the target attribute of <a> element. It specifies whether to open a new tab when the user clicks on the submit button or process the data on the same tab.

Example

<form action="/save.php">   

<label for="name">Name:</label>   
<input type="text" id="name" name="name"><br>   

<label for="age">Age:</label>   
<input type="number" id="age" name="age"><br>  

<input type="submit" value="Save">   
<input type="submit" formtarget="_blank" value="Save to a new tab"> 

</form>

Preview

Name:
   
Age:   
 

Formnovalidate

Generally, the type attribute is also used to set a validate data type. But if the form submits button has a formnovalidate attribute then the form data will be submitted without validation check.

Example

<form action="/save.php">    

<label for="name">Name:</label>   
<input type="text" id="name" name="name"><br>    

<label for="mail">Email:</label>   
<input type="email" id="mail" name="mail"><br>   

<input type="submit" value="Save">   
<input type="submit" formnovalidate="formnovalidate" value="Save without validation"> 
</form>

Preview

Name: 

Email:

Form Input Attribute

• form attibute is used to specify the parent form of the <input> element.
• formaction attribute can overwrite the action attribute of <form>.
• formectype specifies how should be the form data encoded.
• formenctype only work with post method.
• formnovalidate attribute can send the data without validation check.