HTML Hidden Property: Hidden Input Form

The hidden attribute in HTML is a boolean attribute that specifies whether an element should be hidden. When present, the element is not displayed in the browser. The hidden attribute is commonly used with <input> elements of type hidden to store data that the user doesn’t need to see or interact with directly, but that is required for processing the form. This data is sent to the server along with the visible form data when the form is submitted.

Purpose of the hidden Property

The primary purpose of the hidden attribute is to:

• Store data: Store values that are needed by the server but should not be displayed to the user.
• Maintain state: Persist values across multiple pages or form submissions.
• Enhance security: Pass information without exposing it to the user, which can be useful in certain security scenarios.

Syntax

The syntax for using the hidden attribute with an <input> element is as follows:

<input type="hidden" id="elementId" name="elementName" value="someValue" hidden>

Possible Attributes

While the hidden attribute itself is boolean and doesn’t take a value (its mere presence means “true”), the <input type="hidden"> element has other attributes that are important:

Examples

Let’s explore some examples of how to use the hidden property in HTML forms.

Basic Hidden Input

This example demonstrates a basic hidden input field that stores a user ID.

<form id="basicForm">
  <input type="hidden" id="userID" name="userID" value="12345" hidden>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br><br>
  <input type="submit" value="Submit">
</form>

In this case, the userID is sent to the server when the form is submitted, but it is not visible to the user.

Hidden Input with JavaScript

This example shows how to dynamically set the value of a hidden input field using JavaScript.

<form id="dynamicForm">
  <input type="hidden" id="sessionID" name="sessionID" value="" hidden>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const sessionIDInput = document.getElementById('sessionID');
    sessionIDInput.value = generateSessionID();

    function generateSessionID() {
      return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
    }
  });
</script>

In this example, a session ID is generated using JavaScript and set as the value of the hidden input field.

Real-World Use Case: Tracking Form Submissions

A common real-world use case is tracking where a form submission originated from. This can be achieved by embedding a hidden field with a campaign ID or referral source.

<form id="trackingForm">
  <input type="hidden" id="campaignID" name="campaignID" value="summer2024" hidden>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

Here, the campaignID hidden field tracks that the form submission came from the “summer2024” campaign.

Hidden Input with Conditional Logic

This example demonstrates how to use a hidden input field in conjunction with conditional logic to store additional information based on user interactions.

<form id="conditionalForm">
  <input type="hidden" id="planType" name="planType" value="basic" hidden>
  <label for="upgrade">Upgrade to Premium?</label>
  <input type="checkbox" id="upgrade" name="upgrade" onchange="updatePlanType()">
  <br><br>
  <input type="submit" value="Submit">
</form>

<script>
  function updatePlanType() {
    const upgradeCheckbox = document.getElementById('upgrade');
    const planTypeInput = document.getElementById('planType');
    planTypeInput.value = upgradeCheckbox.checked ? 'premium' : 'basic';
  }
</script>

In this example, the planType hidden field is updated based on whether the user checks the “Upgrade to Premium?” checkbox. If the checkbox is checked, the value of planType is set to “premium”; otherwise, it remains “basic”.

Note: While hidden inputs are useful, they should not be used as the sole method of securing sensitive data. Always validate and sanitize data on the server-side to prevent security vulnerabilities. 🛡️

Accessibility Considerations

Although hidden input fields are not visible, it’s important to consider accessibility. Ensure that the form as a whole is accessible by providing proper labels and instructions for all visible form elements. Screen readers will generally ignore hidden fields, but proper form structure is still crucial for users with disabilities.

Browser Support

The hidden attribute and <input type="hidden"> are supported by all major browsers, ensuring consistent behavior across different platforms.

Conclusion

The hidden attribute and <input type="hidden"> are valuable tools for storing and transmitting data in HTML forms without displaying it to the user. By understanding how to use hidden input fields effectively, you can enhance the functionality and security of your web applications. Remember to use them judiciously and always validate data on the server-side for robust security.