HTML Hidden Input Field
An HTML hidden input sends a value with a form without displaying an editable control in the page interface. It is useful for values such as a record ID, form state or reference value that the server needs when processing the submission.
<input type="hidden" name="product_id" value="184">How a Hidden Input Works Top ↑
A hidden input is part of the form data set even though the browser does not render an editable field for it. When the form is submitted, the control's name and current value are sent with the other successful form controls.
<form action="process.php" method="post">
<input type="hidden" name="product_id" value="184">
<button type="submit">Add to cart</button>
</form>The server may receive product_id=184, but it must still check whether 184 is a valid product and whether the requested operation is allowed.
Important Hidden Input Attributes Top ↑
name Top ↑
The name identifies the submitted field. A hidden input without a useful name is generally not useful for form submission because its value will not be included under a field name.
value Top ↑
The value contains the data sent for that field. The browser may receive this value from the page source, JavaScript or server-generated HTML, but the receiving application must not assume the value is trustworthy.
<input type="hidden" name="order_ref" value="A1048">Common Uses of Hidden Inputs Top ↑
- Record or product IDs: identify the item associated with a submitted form.
- Workflow state: carry a step, mode or return value that the server expects.
- Reference values: pass a campaign, page or source identifier with a submission.
- Security tokens: some applications place CSRF tokens in hidden inputs, but security comes from generating and validating the token correctly, not from the input being hidden.
Hidden Inputs and Security Top ↑
Anyone who can load the page can inspect the hidden field and may be able to modify it before submission. Never use a hidden field as proof that a value is genuine or that a user is authorized to perform an action.
For example, storing a product ID in a hidden input is reasonable. Storing a price and blindly charging whatever price is submitted is not. The server should look up or validate authoritative values before performing the operation.
Validation and Form Behavior Top ↑
Hidden inputs are not interactive controls, cannot receive normal keyboard focus and do not participate in browser constraint validation. Do not rely on attributes such as required or pattern to protect hidden values. Validate submitted data on the server.
A hidden input also does not need a visible form label because there is no user-facing control to identify. This differs from text fields, checkboxes, radio buttons and other interactive controls.
Example with Visible and Hidden Fields Top ↑
Here the user enters a quantity while the form also submits the associated product ID.
<form action="process.php" method="post">
<input type="hidden" name="product_id" value="184">
<label for="qty">Quantity</label>
<input type="number" id="qty" name="quantity" min="1" value="1">
<button type="submit">Submit</button>
</form>The browser-side minimum for quantity can improve usability, but the server must still validate both quantity and product_id.
Common Hidden Input Mistakes Top ↑
Assuming hidden means protected Top ↑
Hidden values can be inspected and changed. Never use visibility as a security boundary.
Trusting IDs or prices without server checks Top ↑
Validate identifiers, permissions and authoritative business values on the server before using submitted data.
Forgetting the name attribute Top ↑
The name is what identifies the value during normal form submission.
Putting secrets in page source Top ↑
Anything delivered to the browser should be considered visible to the user, even if the page does not display it.
Related HTML Form Tutorials Top ↑
Frequently Asked Questions Top ↑
It includes a named value in form data without displaying an editable form control to the user.
No. Users can inspect and modify hidden values, so the server must validate submitted data and enforce authorization.
A name is needed when you want the hidden value to be identified and submitted as part of normal form data.
Yes, but the server must verify that the ID is valid and that the current user is allowed to perform the requested operation.
Yes. A hidden input is commonly used to submit a CSRF token, but protection depends on securely generating and validating the token rather than on hiding it.
No visible label is normally needed because a hidden input is not an interactive user-facing form control.
HTML Form Text Input field Password input field Textarea multi line input
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
| Md Anisur Rahman | 01-02-2019 |
| Your information is helpful for me. | |