Think of filling out a sign-up page. Clear fields make the job simple; confusing fields make people leave.
What You Need to Know
The hidden product ID is still part of the request but does not appear as a visible control.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<form action="/checkout" method="post">
<input type="hidden" name="product-id" value="SKU-101">
<label for="quantity">Quantity</label>
<input id="quantity" name="quantity" type="number" min="1" value="1">
<button type="submit">Buy</button>
</form>Let’s Read the Code
- id: An id uniquely identifies an element on this page.
- <form>: The form groups controls and identifies where submitted data goes.
- <input>: The input is a control. Its type changes the way people enter information.
- type: Type changes what sort of control or resource the browser uses.
Read the named elements and attributes together. They explain how the browser connects this feature to the rest of the page.
What Happens in the Browser?
When the form reaches a server, the server must check the information again. A nice-looking HTML field is not a security control.
Where does the answer go? The example uses the submitted name(s) product-id, quantity. Those names help the receiving server identify each answer. A label is for people; a name attribute is for the form data; an ID connects elements in the page.
Your Turn
Change the hidden value in Developer Tools and explain why the server must check it.
Common Beginner Mistakes
- Copying the example without giving the fields a clear label and a usable name.
- Anyone can inspect and alter hidden fields; verify product IDs and prices on the server.
Key Takeaways
- A control needs a clear label and, when submitted, a meaningful name and value.
- id: An id uniquely identifies an element on this page.
- Remember that HTML form rules help the visitor, but server-side code must decide whether received data is valid.