HtmlHow-ToBeginner · 3 min read

How to Create Hidden Input in HTML: Simple Guide

To create a hidden input in HTML, use the <input type="hidden"> element. This input is not visible on the page but can store data that is sent with a form.

📐

Syntax

The hidden input uses the <input> tag with the attribute type="hidden". It also usually includes a name attribute to identify the data and a value attribute to hold the hidden data.

type="hidden": Makes the input invisible on the page.
name: The key used when sending data to the server.
value: The data stored in the hidden input.

html

<input type="hidden" name="key" value="hiddenValue">

💻

Example

This example shows a form with a hidden input that sends a secret token along with the visible username field when submitted.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hidden Input Example</title>
</head>
<body>
  <form action="/submit" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    <input type="hidden" name="token" value="abc123xyz">
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Output

A form with a visible username field and a submit button. The hidden input is not visible but sends the token value when the form is submitted.

⚠️

Common Pitfalls

Common mistakes when using hidden inputs include:

Forgetting to add the name attribute, so the data is not sent.
Using hidden inputs to store sensitive data like passwords, which is insecure.
Expecting hidden inputs to be secure; users can see and change their values using browser tools.

html

<!-- Wrong: Missing name attribute, data won't be sent -->
<input type="hidden" value="secret">

<!-- Correct: Includes name attribute -->
<input type="hidden" name="secretKey" value="secret">

📊

Quick Reference

Use hidden inputs to store data you want to send with a form but do not want users to see. Always include name and value. Do not use for sensitive data.

Attribute	Description
type="hidden"	Makes the input invisible on the page
name	Key used to identify the data when sent
value	The data stored and sent with the form

✅

Key Takeaways

Use to add invisible data fields in forms.

Always include a name attribute so the data is sent to the server.

Hidden inputs are not secure; do not store sensitive information.

Users can view and edit hidden inputs using browser developer tools.

Hidden inputs help pass extra data without cluttering the form UI.