What’s the point of having hidden input in HTML? What are common uses for this?

by

They’re used to pass data that will be needed when the form is submitted. One of the more common cases would be a form allowing users to edit some existing entry. You’ll need to know which entry they’re editing so that you can update the correct row in the database when they submit the form. The user doesn’t need to edit (or even know) the ID of the entry though, so a hidden field works well here.

Other options

URL parameters:
This could also be done by building the parameters into the url that the form is being submitted to:

<form action="save.php?entry_id=1234">

but this means you have to handle building the URL properly and escaping the data yourself, and the length of URLs servers will accept is limited so it may not work for longer data. So generally using hidden form fields is the easier way to go.

Session variables: When the edit page loads you’d store the entry ID in a session variable, and then retrieve it on the page that saves the changes. That’s a lot easier to mess up though; setting up and maintaining sessions may require adding code in several different places, and then their session could expire in between loading and saving, and you have to make sure it works if they have multiple windows or tabs open, and you have to make sure it doesn’t do weird things when they hit back/forward. Because of all these potential pitfalls it isn’t a great way to solve this problem–passing the id with the data being submitted is a lot more robust.

Cookies: In many languages/frameworks sessions are tracked using cookies, so they’re basically the same solution. The pitfalls are the same as for session variables even when sessions are tracked by other methods though.

More Related Contents:

  1. Put icon inside input element in a form
  2. What does “for” attribute do in HTML tag?
  3. Limit number of characters allowed in form input text field
  4. Is there a way to style part of an input field’s value? [duplicate]
  5. Is well formed without a ?
  6. What does “for” attribute do in an HTML tag?
  7. HTML input field OUTSIDE of a form
  8. Make input element (type=”text”) handle multiple lines of text
  9. Two submit buttons in one form
  10. What is the boundary in multipart/form-data?
  11. Disabled form inputs do not appear in the request
  12. Are there any style options for the HTML5 Date picker?
  13. Using PUT method in HTML form
  14. Disable validation of HTML5 form elements
  15. Wrapping text inside input type=”text” element HTML/CSS
  16. Multiple Forms or Multiple Submits in a Page?
  17. Pre-Populate HTML form file input
  18. is there a max size to the length of a hidden input in html?
  19. How can I style a file input field in Firefox?
  20. Inline Form nested within Horizontal Form in Bootstrap 3
  21. HTML Submit-button: Different value / button-text?
  22. Why do s clear floats?
  23. What is the correct readonly attribute syntax for input text elements?
  24. Node.js – How to send data from html to express
  25. Set a form’s action attribute when submitting?
  26. HTML multiple select box
  27. Can I use an HTML input type “date” to collect only a year?
  28. How can I control the height of an Option element in Webkit?
  29. HTML form input tag name element array with JavaScript
  30. How do I style radio buttons with images – laughing smiley for good, sad smiley for bad?

Leave a Comment