How to Use the "hidden" HTML INPUT Tag

<input type="hidden">

The hidden INPUT tag allows HTML form developers to store information for delivery with the form data that is invisible to the form users.

Hidden form fields might be used to save the current state in multi-page forms, collect cookie data to deliver through the form, and store data beyond what the customer fills in.

They can contain static information that doesn't change or can be used to pass along information generated by JavaScript, like values that the user might not know (e.g the exact time that the form was loaded).

Note: Remember that hidden fields are not completely hidden from view, but instead just not easily accessible to most viewers. Your readers can still easily see the hidden content fields if they view the source code of the page. Therefore, never use a hidden input field to store passwords or any other sensitive information.

Example of the hidden INPUT Tag

The syntax for implementing the hidden tag should conform to what's shown in bold in this example:

<html>
<body>

<form action="/page.php">
Name: <input type="text" name="fname">
<input type="hidden" name="country" value="US">
<input type="submit" value="Submit">

</form>

</body>
</html>

Clearly, with our example, we are passing the country value of "US" through the form so that when the data is collected, we know that the form was submitted by a user in the United States. This can be changed to anything we want by simply altering the HTML as shown above.

Like mentioned above, the following could be used to generate the current date and time, respectively (they're used with MySQL):

<input type="hidden" name="date" value="<?php CURDATE(); ?>">
<input type="hidden" name="date" value="<?php CURTIME(); ?>">

The following could be used if PHP is implemented:

<input type="hidden" name="date" value="<?php print(date("m/d/Y, h:s A")); ?>">

Tip: You can see some other examples of INPUT tags in our guide to Making HTML Buttons on Forms.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Use the "hidden" HTML INPUT Tag." ThoughtCo, Aug. 21, 2017, thoughtco.com/input-type-hidden-3468607. Kyrnin, Jennifer. (2017, August 21). How to Use the "hidden" HTML INPUT Tag. Retrieved from https://www.thoughtco.com/input-type-hidden-3468607 Kyrnin, Jennifer. "How to Use the "hidden" HTML INPUT Tag." ThoughtCo. https://www.thoughtco.com/input-type-hidden-3468607 (accessed November 20, 2017).