WEBVTT 0 00:00.870 --> 00:02.670 We've looked at passwords. 1 00:02.700 --> 00:10.740 Now I want to look at one that's a little bit confusing at first, and that is, input of type hidden. 2 00:10.770 --> 00:18.150 Firstly, the hidden type is regarded as a text input field and it's been around for a very, very long 3 00:18.150 --> 00:20.690 time - since "Par fell off the bus". 4 00:20.700 --> 00:21.810 And what's it used for? 5 00:21.810 --> 00:22.810 Why do we have it? 6 00:22.830 --> 00:27.900 It's used to create a form control that's invisible to the user. 7 00:27.930 --> 00:29.680 But don't let this fool you. 8 00:29.700 --> 00:36.480 The information in the hidden text input field is still sent to the server along with the rest of the 9 00:36.480 --> 00:37.680 form data. 10 00:37.710 --> 00:43.650 In other words, while the value is not displayed to the user in the page's content, it is still visible 11 00:43.650 --> 00:49.440 and can be edited using any browser's developer tools or view source functionality. 12 00:49.470 --> 00:51.420 Let me show you what I mean. 13 00:51.810 --> 00:54.390 Let's start off by creating a form. 14 00:54.630 --> 00:57.510 The action can just be blank. 15 00:57.870 --> 00:59.550 The method I want to define. 16 00:59.550 --> 01:02.620 I know the default is GETG, but let's just be explicit here. 17 01:02.920 --> 01:05.680 And now I want to create an input, right? 18 01:05.680 --> 01:09.000 And let's just do an input of type text. 19 01:09.010 --> 01:10.180 Very, very simple. 20 01:10.180 --> 01:12.340 And this can be the user's first name. 21 01:13.120 --> 01:13.840 There we go. 22 01:13.960 --> 01:16.450 Nothing unusual about that. 23 01:16.480 --> 01:22.600 The next thing I want to do, though, is I want to create a input with type hidden. 24 01:22.720 --> 01:24.910 This is the first time we've used this. 25 01:24.940 --> 01:26.290 It's very, very exciting. 26 01:26.290 --> 01:31.210 And remember how I said it needs a name, and it needs a value attribute? 27 01:31.810 --> 01:33.520 So the name is the variable name. 28 01:33.520 --> 01:39.100 Let's just say "secretMessage". And let's give it a value, 29 01:39.100 --> 01:44.380 and the value here can just be "boo 👻". Remember, I just want to prove to you that we can still see that 30 01:44.380 --> 01:46.620 value even though the user can't. 31 01:46.630 --> 01:52.480 And finally, in order to submit this form, let's just have an input with type of submit. 32 01:52.510 --> 01:54.010 We don't even need a value. 33 01:54.160 --> 01:55.180 So there we go. 34 01:55.180 --> 01:57.130 Let's now expand the browser. 35 01:57.280 --> 02:00.940 Let's open up dev tools, let's fill in the name, put in 36 02:01.060 --> 02:03.250 Wally. Let's click Submit. 37 02:04.060 --> 02:05.590 And look what's going to happen. 38 02:06.660 --> 02:08.160 Let's go to the Network tab. 39 02:08.310 --> 02:09.930 Let's click on the index file. 40 02:11.330 --> 02:13.880 And look at what we see. 41 02:14.000 --> 02:14.970 Wow. 42 02:14.990 --> 02:16.580 In the query string parameters, 43 02:16.610 --> 02:20.180 well, firstly, we know it's a query string parameter because it's a GET request, 44 02:20.210 --> 02:22.850 we see the secret message of "boo". 45 02:22.880 --> 02:28.250 That information was sent to the server and you can even see it in the URL bar. 46 02:30.170 --> 02:35.220 My point is, don't let the fact that it's "hidden" fool you, it can still be viewed. 47 02:35.240 --> 02:36.890 You just have to know how to get there. 48 02:36.950 --> 02:37.850 So there we go. 49 02:37.850 --> 02:41.090 We can still see the value of the hidden input type, right? 50 02:41.090 --> 02:46.310 And because of that, we do not use it as a form of security. "Well then Clyde, 51 02:46.640 --> 02:49.160 why do we even have this type? 52 02:49.160 --> 02:50.360 Why do we use it?" 53 02:50.390 --> 02:54.380 Well, that, my dear students, is a very good question, and I can think of 3 high level reasons 54 02:54.380 --> 02:57.170 why we use the type of hidden. 55 02:57.260 --> 03:03.230 Firstly, for database reasons. One of the most common uses for the hidden inputs is to keep track 56 03:03.230 --> 03:05.960 of what database record needs to be updated, 57 03:05.960 --> 03:11.270 for example, when an edit form is submitted. And I'm going to be talking a little bit more about this 58 03:11.270 --> 03:12.140 soon 59 03:12.140 --> 03:15.140 so that's all I'll say about databases here. 60 03:15.140 --> 03:21.770 Another reason why you might want to use it is if you want to submit a time stamp to a server stating 61 03:21.770 --> 03:27.800 when an order was placed, for example. Because it's hidden, the user cannot see nor intentionally 62 03:27.800 --> 03:29.090 edit the value. 63 03:29.120 --> 03:34.890 It will never receive focus and a screen reader will also not notice it or read it either. 64 03:34.890 --> 03:37.860 So it's quite a common thing to use it to send a timestamp. 65 03:37.860 --> 03:44.940 And finally, although we can't rely on it for security itself, we can use it in conjunction with, 66 03:44.970 --> 03:46.350 say, security tokens. 67 03:46.350 --> 03:47.310 For example, 68 03:47.310 --> 03:53.820 hidden inputs could be used to store and submit security tokens or secrets for the purposes of improving 69 03:53.820 --> 03:54.870 website security. 70 03:54.870 --> 03:57.180 The basic idea is kind of simple. 71 03:57.330 --> 04:03.120 If a user is filling in a sensitive form such as a form on their banking website to transfer money from 72 04:03.120 --> 04:09.480 one account to another, the secret they would be provided with, would prove that they are who they say 73 04:09.480 --> 04:14.790 they are and that they are using the correct form to submit the transfer request. 74 04:14.790 --> 04:15.540 So there you go. 75 04:15.540 --> 04:19.740 Those are three reasons why you might want to use the input type of hidden. 76 04:19.740 --> 04:20.970 It's not redundant. 77 04:20.970 --> 04:23.130 It's not a useless type. 78 04:23.280 --> 04:28.950 "All right, Clyde, I know why we might want to use the input type of hidden, but how do we use it? 79 04:28.950 --> 04:32.220 Because it's not as trivial as just writing input type hidden. 80 04:32.250 --> 04:33.510 That won't do much. 81 04:33.510 --> 04:35.700 In fact, that will do nothing." 82 04:35.700 --> 04:40.650 If you create this hidden input type, there are few things you need. 83 04:41.130 --> 04:45.750 You need a name attribute. And remember what the name attribute is? 84 04:45.780 --> 04:50.160 Think of the name attribute as the variable name that you're going to be submitting to the server. 85 04:50.160 --> 04:55.530 When you write server code, you need a way to extract data, so you need to know what the variable 86 04:55.530 --> 04:59.070 name is, and that's what you set in the name attribute. 87 04:59.490 --> 05:04.650 And the second attribute, a very important attribute is the value attribute. 88 05:04.650 --> 05:10.440 The value of this value attribute can be dynamically set via JavaScript. 89 05:10.440 --> 05:15.180 For example, if you're wanting to send a timestamp along to the server, when a form is submitted, 90 05:15.180 --> 05:20.760 you can use JavaScript to grab the current timestamp, put it in there and then it's sent to the server. 91 05:20.760 --> 05:28.890 And I just want to mention, because this is hidden, we don't use a label with this hidden input type. 92 05:28.890 --> 05:31.350 It just wouldn't make sense to, right? 93 05:31.350 --> 05:33.060 Okie dokie, let's move on.