Best Practices for HTML Hidden Inputs

This guide is a comprehensive breakdown of best practices around when and where to use HTML hidden inputs, also known as hidden fields.

Hidden inputs are powerful tools for transmitting information that your end-user doesn’t need to know about, but it’s only one of many methods that can accomplish similar goals.

Depending on your use case and tech stack, it may or may not be your best course of action.

What is an HTML hidden input?

An HTML hidden input, also known as a hidden field, is an HTML tag used by developers during a web form submission to include data that isn’t intended to be modifiable or viewable by the end user who submits the form. To add a hidden input, include it in your code as an input tag: <input type=”hidden”>.

For example, the following is a signup form that also sends back the version of the current code.

When to use HTML hidden inputs

There are many situations where you might be able to use an HTML hidden input, but not all use cases are appropriate. For example, you might want to use a hidden input for:

User identifiers

These include any properties used to uniquely identify a particular user, such as an internal user ID, IP address, or email / phone number. When a user fills out a form, sending a unique identifier along with the form allows you to associate their data with an existing user that you already know about.

Session attributes

An HTML hidden input can track session attributes such as the current webpage URL or the current step of a multipage form, which are helpful context for a particular submission to the server.

UTM parameters

When a user reaches a form via a marketing campaign, a UTM parameter is usually included as a query parameter in the URL. The site can parse the UTM and then store it into a hidden form input. This would allow the server to associate a particular form submission with the marketing campaign that led to it.

Database Record ID

If a form is being used to update an existing database entry rather than create a new entry, you could include an HTML hidden input that stores the unique ID of the record to be modified. If an ID is not set on the hidden input, assume it’s a new entry to be created.

Security Token

The server may generate a security token that’s passed to the website’s HTML hidden input and submitted as part of the form back to the server. This is a mechanism to prevent cross-site request forgery (CSRF), an attack where users are led to a bad third-party form that spoofs the real one. Since the server can look for the security token generated as part of the real form’s hidden input, it can distinguish requests from its own forms vs others.

These tokens can also be used to expire a form if it hasn’t been submitted after a long period of time.

When not to use HTML hidden inputs

There are also a few situations where you might be able to avoid using an HTML hidden input, for example:

Secure & confidential information

HTML hidden input values can be accessed and edited from the DOM by the end user. The two major implications here are:

• Don’t store data in hidden inputs / hidden fields that you need to keep private from the end user. This includes information about other users and credentials they could use to spoof or spam your system.
• From the server, always validate hidden input request data and assume they could be doctored. For example, if the server sends an email to the web form to be stored into a hidden input, the email address the server receives is not guaranteed to be the same one it sent.

Data that needs client-side form validation

HTML hidden input values bypass client-side form validation, which means you’ll need to either write custom Javascript validation logic or validate the data server-side (which you should do either way). If you’re already writing custom Javascript validation logic, you may want to re-examine if you actually need an HTML hidden input.

Best practices for HTML hidden inputs

When using HTML hidden inputs, abide by the following best practices:

1. Always use hidden inputs within an HTML <form> tag

Hidden field inputs are designed to be wrapped by HTML forms. Whereas normal field inputs can also be used standalone to collect information, hidden inputs only work when the form that they’re contained in is submitted.

If you’re not submitting an HTML form and instead doing it in a custom manner via Javascript, you should also track your hidden input values via Javascript.

2. Use a low-code form builder like Feathery to handle hidden inputs securely

If you’re building a form and trying to figure out the best way to manage your hidden fields / inputs, consider using Feathery. Feathery hidden fields are always securely validated, offer a ton of out-of-the-box functionality, and enable your entire team, including non-technical teammates, to be part of the form-building process.

3. Always validate hidden inputs server-side

This is a rehash of the previous point to not assume hidden field input values are secure. They are always accessible and modifiable from the client, so data submitted to the server must be verified for proper format and authenticity.

4. Avoid using HTML hidden inputs with JS frameworks like React

HTML hidden inputs were designed way before frameworks like React and Angular became popular, and they work seamlessly with stateful HTML forms. However, Javascript-based web frameworks manage their own state, so even though it’s possible to still use HTML forms, it’s best practice to instead track hidden input state within the Javascript framework code itself.

Using React as an example, hidden input values would be stored as React state that’s passed into a custom form onSubmit handler.

5. To update an HTML hidden input value, use Javascript

Fetch the hidden input element from the DOM, then update its value property.

6. Leverage special behavior to track character encoding

If you set the name of an HTML hidden input to _charset_, its value will automatically be set to the character encoding of the form upon submission (e.g. utf-8).

<input type=“hidden” name=“_charset_” />

Building a form with hidden inputs/fields?

Feathery’s low-code form builder has extensive support for hidden fields that are securely validated and enable your entire team, including non-technical teammates, to be part of the form-building process.

Feathery also enables hidden fields to be populated via integrations like Plaid, set via the platform's API or embed SDK, and even passed in through Feathery-hosted form URLs.

Ready to begin building your form? Get started for free.