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.
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