Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create a hidden input field in form using HTML ?

  • Last Updated : 18 Oct, 2021

In this article, we will learn how to add a hidden input field into our form using HTML. A hidden control stores the data that is not visible to the user. It is used to send some information to the server which is not edited by the user.  Normally, this hidden field usually contains the value which is common for all the users. The value must be recorded in the database. 

A hidden input field often contains those value which needs to be updated on the database when the form is submitted. 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Approach:

  • We create an HTML Document that contains an <input> Tag.
  • Use the type attribute with the <input> tag.
  • Set the type attribute to value “hidden“.

Syntax:

<input type="hidden">  

Example: In this code, we create a hidden field that contains a record of the user who belongs to the same country i.e India. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to create a hidden input 
          field in form using HTML?
    </title>
      
    <style>
        h1 {
            color:green;
        }
        body {
            text-align:center;
        }
    </style>
</head>
  
<body>
    <h1>
        GeeksforGeeks
    </h1>    
    <h3>
        How to create a hidden input 
          field in form using HTML?
    </h3>
      
    <form action="#">
        <input type="hidden" name="country_name" 
            id="inputID" value="India" >
      
        Name: <input type="text">
          
        <input type="submit" value="Submit">
    </form>
</body>
    
</html>

Output:             

hidden input field




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!