We've looked at passwords.
Now I want to look at one that's a little bit confusing at first, and that is, input of type hidden.
Firstly, the hidden type is regarded as a text input field and it's been around for a very, very long
time - since "Par fell off the bus".
And what's it used for?
Why do we have it?
It's used to create a form control that's invisible to the user.
But don't let this fool you.
The information in the hidden text input field is still sent to the server along with the rest of the
form data.
In other words, while the value is not displayed to the user in the page's content, it is still visible
and can be edited using any browser's developer tools or view source functionality.
Let me show you what I mean.
Let's start off by creating a form.
The action can just be blank.
The method I want to define.
I know the default is GETG, but let's just be explicit here.
And now I want to create an input, right?
And let's just do an input of type text.
Very, very simple.
And this can be the user's first name.
There we go.
Nothing unusual about that.
The next thing I want to do, though, is I want to create a input with type hidden.
This is the first time we've used this.
It's very, very exciting.
And remember how I said it needs a name, and it needs a value attribute?
So the name is the variable name.
Let's just say "secretMessage". And let's give it a value,
and the value here can just be "boo ðŸ‘»". Remember, I just want to prove to you that we can still see that
value even though the user can't.
And finally, in order to submit this form, let's just have an input with type of submit.
We don't even need a value.
So there we go.
Let's now expand the browser.
Let's open up dev tools, let's fill in the name, put in
Wally. Let's click Submit.
And look what's going to happen.
Let's go to the Network tab.
Let's click on the index file.
And look at what we see.
Wow.
In the query string parameters,
well, firstly, we know it's a query string parameter because it's a GET request,
we see the secret message of "boo".
That information was sent to the server and you can even see it in the URL bar.
My point is, don't let the fact that it's "hidden" fool you, it can still be viewed.
You just have to know how to get there.
So there we go.
We can still see the value of the hidden input type, right?
And because of that, we do not use it as a form of security. "Well then Clyde,
why do we even have this type?
Why do we use it?"
Well, that, my dear students, is a very good question, and I can think of 3 high level reasons
why we use the type of hidden.
Firstly, for database reasons. One of the most common uses for the hidden inputs is to keep track
of what database record needs to be updated,
for example, when an edit form is submitted. And I'm going to be talking a little bit more about this
soon
so that's all I'll say about databases here.
Another reason why you might want to use it is if you want to submit a time stamp to a server stating
when an order was placed, for example. Because it's hidden, the user cannot see nor intentionally
edit the value.
It will never receive focus and a screen reader will also not notice it or read it either.
So it's quite a common thing to use it to send a timestamp.
And finally, although we can't rely on it for security itself, we can use it in conjunction with,
say, security tokens.
For example,
hidden inputs could be used to store and submit security tokens or secrets for the purposes of improving
website security.
The basic idea is kind of simple.
If a user is filling in a sensitive form such as a form on their banking website to transfer money from
one account to another, the secret they would be provided with, would prove that they are who they say
they are and that they are using the correct form to submit the transfer request.
So there you go.
Those are three reasons why you might want to use the input type of hidden.
It's not redundant.
It's not a useless type.
"All right, Clyde, I know why we might want to use the input type of hidden, but how do we use it?
Because it's not as trivial as just writing input type hidden.
That won't do much.
In fact, that will do nothing."
If you create this hidden input type, there are few things you need.
You need a name attribute. And remember what the name attribute is?
Think of the name attribute as the variable name that you're going to be submitting to the server.
When you write server code, you need a way to extract data, so you need to know what the variable
name is, and that's what you set in the name attribute.
And the second attribute, a very important attribute is the value attribute.
The value of this value attribute can be dynamically set via JavaScript.
For example, if you're wanting to send a timestamp along to the server, when a form is submitted,
you can use JavaScript to grab the current timestamp, put it in there and then it's sent to the server.
And I just want to mention, because this is hidden, we don't use a label with this hidden input type.
It just wouldn't make sense to, right?
Okie dokie, let's move on.