Is there a max size to the length of a hidden input in HTML?

Picking a form method based on data size

Your first critical decision when submitting data via an HTML form comes down to this: GET or POST? Here's a quick heuristic to guide you:

• GET: For simpler, smaller data payloads and search queries.
• POST: For complex, large-volume data.

// "GET or POST, that's the question!"


A word of caution: hidden inputs aren't a fortress. Sensitive data within them is easily accessible through a simple webpage inspection. For security-critical data, a secure backend solution is your safest bet.

Server-side constraints and optimisation

Server configuration can significantly impact the chunk of data we can push from client to server. In the server-side world, different technologies have unique settings for managing the maximum allowable request sizes:

• Apache: Look out for the LimitRequestBody directive.
• PHP: Directives like post_max_size and upload_max_filesize are your guiding stars.
• Nginix: Adjust client_max_body_size to fine-tune the allowable HTTP POST size.

Keep in mind, even though browsers don't impose limits on POST method size, they do have practical limits set on resource allocation.

Taming your hidden input

While hidden inputs can technically accept massive amounts of data, reckless stuffing can lead to:

• Performance breakdowns
• Browser inconsistencies: Some browsers are known to struggle or behave unpredictably with extremely large hidden input values.

<!-- "With great power, comes great browser inconsistency" -->


Know your browser and HTML input limits

Each browser has its own characteristics when dealing with hidden input sizes:

• Internet Explorer: Has a documented GET limit of 2083 bytes.
• Modern Browsers: Can typically handle GET requests of 2 KB and POST requests reaching hundreds of megabytes or even larger.

Remember, the maximum maxlength value that you can set for an HTML text input is 65535 characters. While the maxlength attribute isn't applicable to hidden inputs, it does give you an idea of the kind of data size Browsers can comfortably handle.

Placing data transmission and storage under the lens

Have a close look at the type of data you plan to push via hidden inputs:

• Data Security: Ensure data is encrypted and validated where necessary.
• Data Persistence: Lean on strategic client-side storage solutions: cookies, Web Storage API, or IndexedDB.
• Scalability: Databases are the ultimate saviors for managing large datasets on the server-side.

The breaking point: overflow solutions

When the dam is about to burst, you need alternatives to handle massive data:

• Database Storage: Use a backend database and store a unique key in the hidden field.
• Sessions: Store data in session variables on the server-side.
• File Uploads: Leverage the <input type="file"> input type and handle the data on the server-side.

<!-- "Size matters not. Except in the world of hidden inputs!” -->
