Reasons to use hidden input types in web forms

I know this question is beyond basic but for some reason, I'm just not comprehending when I should or would want to use this type of input type in a web form/survey.  I've created a number of these now and have never used this input type but wonder what I'm missing out on.  To be clear here's an example of the input type:

<input type="hidden" value="us_only" name="site" id="search-site">

whomever responds, please give me some pratical examples of when, where and why I would use this input type.
LVL 1
max7Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Ali KayahanConnect With a Mentor Full Stack DeveloperCommented:
   Imagine that you have the feedback form below ;
<?php
$ref=@$HTTP_REFERER ;
?>
    <form action="feedback.php" method="POST">
   Your Name :<input type="text" size="10" name="visitor_name" />
   E-mail :<input type="text" size="10" name="visitor_email" />
   Your Message :<textarea cols="20" rows="40" name="visitor_message"></textarea>
   <input type="hidden" value="<?=$ref ?>" name="from_where">
    </form>
  Basicly when the user clicks submit,you will have a variable that holds where user came from passed to your server side script,which is hidden from user.

   Also if its a registered user you may pass his id to hidden input which will help you to determine who is the sender.
 
   Sure you can handle those kind of things with alternative ways,but hidden input field is one of the easiest...

P.S : Although the hidden input fields are not shown to user directly during form fill,if they look at source they will be able to see the info stored in hidden field.So you should pass secure info such as password via hidden input fields.
   
0
 
hieloConnect With a Mentor Commented:
Let's say you have an online quiz that consists of 5 questions but you only display one question at a time. Ideally, you would want to give the user a "confirmation" page where they can see all their answers before actually submitting/processing the responses. So, you would want to do this AFTER all the questions have been aswered.  When one question is completed, you click "Next" and you get the other question but what happens to the previous answer? Well, you could save it on the server via Sessions, which would consume server resources OR you could just send it back to the client in a hidden variable. Basically, you use the hidden variable as "temporary storage" withing the <form> that will not be seen by the user. When you reach the last question, you will have all the answers in the same form - all the previous answers in hidden variables and the current answer in a "visible" input field. When you submit that page your server will see all the responses and would then show the user all the responses on one page and give them a chance to modify/edit any of their responses before actually submitting. The "hidden" variable is "hidden" from the user on the BROWSER, not the server.
0
 
Ali KayahanFull Stack DeveloperCommented:
Hi max7 ;May be hidden form fields would be useless in plain html.But as far as serverside scripting concerned,it becomes one of the most important keystones for developers.
     You can pass so many important information via hidden input fields,that visitor should see such as user_id or page no for dynamic sites, and also you may use it for captcha.
    Sure there are lots of alternative ways to pass info to other pages such as cookies,sessions and URL ,but hidden input fields are one of the useful.
    Also in forms you may assing a value that you created with javascript to hidden input field on page load ,and compare that with the user side,to assure that form filler is a human instead of bot (capthca)
   
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
max7Author Commented:
Hielo wrote:
>>>Basically, you use the hidden variable as "temporary storage" withing the <form> that will not be seen by the user.

Wow -- great example.  Can you give me one more example of how hidden form fields can be used?

ali_kayahan wrote:
>>> . . . it becomes one of the most important keystones for developers.

Another wow -- can you give me an example how you personally use this type of form field?

Basically, from both comments it seems that hidden form fields is a convenient way of capturing and passing information to the server where needed -- did I get that right?


0
 
Ali KayahanFull Stack DeveloperCommented:
Corection **So you should not pass secure info such as password via hidden input fields.
0
 
HonorGodConnect With a Mentor Commented:
One reason for using "hidden fields" is to keep track of information.
HTTP is a sessionless protocol, meaning that the client (e.g., browser)
sends a request (query) to the server, and the server responds.  At
that point, the server can "forget" everything about the request/query.

So, different techniques have been developed to keep track, or persist,
information for longer than the request/response.  Some of these
techniques include:

- cookies
- session data
- hidden fields

Hopefully this helps.
0
 
max7Author Commented:
Thanks a lot guys; I'm going to read through all your comments and experiment with this.
0
 
HonorGodCommented:
Thanks for the assist.  Good luck & have a great day
0
All Courses

From novice to tech pro — start learning today.