A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore hidden input tampering and server-side trust using a short example that you can inspect and change.
The Idea in Plain English
A hidden input is only invisible in the page layout. Anyone can edit its value using developer tools or by forging a request, so the server must never treat it as proof of permission or price.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<form action="/save" method="post">
<input type="hidden" name="draft_id" value="draft-17">
<label for="note">Note</label>
<textarea id="note" name="note"></textarea>
<button type="submit">Save draft</button>
</form>What Each Part Does
- The input creates a field; its type changes the editing controls and the name identifies submitted data.
- The form collects and submits named fields to the destination specified by action.
- The label tells visitors and assistive tools what a control is for.
- id names an element for labels, fragments, CSS or JavaScript; IDs should be unique.
- action sets the URL that receives a submitted form.
- method chooses GET or POST for form submission.
The hidden value is included in an ordinary form submission if the input is enabled and named.
Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.
Try It Yourself
Try this next: demonstrate a safe and an unsafe snippet and validate behavior focused on Hidden Input Tampering and Server-Side Trust, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Trusting hidden form fields for account roles, discounts or product prices.
- Copying the code without checking whether its linked files or endpoints exist; sample addresses and file paths need real resources.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- A hidden input is only invisible in the page layout. Anyone can edit its value using developer tools or by forging a request, so the server must never treat it as proof of permission or price.
- The hidden value is included in an ordinary form submission if the input is enabled and named.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.