HTML Form input Attribute

By | October 19, 2020

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

<input form=""> it is an attribute of <input> element, and it specifies the parent form of the <input> element. The value of the form attribute must be equal to the id attribute value of <form>.
Example
<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

Vamware



Formaction

formactionis 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





   

Formenctype

The formenctypeattribute 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

  
  

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





  

Formtarget

formtargetis 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

   
   
  
 

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





  

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.
  • formnovalidateattribute can send the data without validation check.

Leave a Reply

Your email address will not be published. Required fields are marked *