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

    <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

    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.

    People are also reading: