Okay.
Andre, can we finally submit this form?
All right, in this video, we'll finally see what happens when we submit this form.
But there is one last thing that we need to include, and that is the name attributes.
And I'll explain towards the end of this video why we need those.
So we want to add in each one of our fields a name attribute.
So this one will be first name.
And I'm just going to copy and paste here just so it'll be a little bit faster.
We have.
Last name email.
Password.
Birthday.
We already have these for the radio buttons, which is good.
And we need here.
Cat.
Dog.
Volvo.
Okay.
Now, we don't need it for the buttons because while there's no user information there.
So I'm going to save that and I'm going to make this full screen so you can see I'm going to refresh
the page and let's enter some fake data and see what happens.
So I'm going to say fake man email address is fake password would be one, two, three.
Birthday will be male with a cat and has an Audi.
I'm going to click register now but keep an eye out up over here to see what happens when I click.
Did you catch that?
Let's copy this.
Because when I clicked register, this got attached.
I'm going to minimize this and print this out here so we can see it for ourselves.
First we have a question mark.
Then first name, fake.
That's exactly what we entered.
We have last name, man.
Email is fake.
Something, something gmail.com.
Password.
One, two, three.
Oh, they know our password.
Birthday.
Gender.
And Cat on.
We didn't I didn't select Volvo.
I'm not sure why.
I'll take a look at that later.
But you can see over here that the value that the values that we entered into our form, we're just
attached to this link.
And this is actually called query strings.
And what it is, it's one way for us to send our information to the back end or the servers because
we have to store this form information somewhere so that when we come back onto this page, the website
remembers UPS.
This was automatically generated in HTML five with a form but form.
Was using an attribute called get and this get.
If I left it as this, we'll do the exact same thing where it will attach the form information to the
URL and send it to the server.
There is another option where you can do post and you can try it on your own here, but you wouldn't
see any query parameters, so this wouldn't change the bar at the top one change.
And that is because it will be attached to the body of the request, which we'll get into when we get
to that section.
I don't want to confuse you too much, but you can see the difference here of why we might want to use
post instead of get because well, what if somebody was over my shoulder and they could see my password
right there in the bar?
I just wanted you to get comfortable with the idea that we are sending this information to the back
end.
The way we handle that, we'll get into later on in the course.
Right now, we're just focusing on the front end.
The last thing I want to show you was that form also has a action attribute which used to get used a
lot.
If you saw old PHP based websites, they'll have some sort of action dot PHP which said submit this
form.
And when you submit this form to the back end to the server, run this script, this file that's on
the server, but there are better ways of doing this now, so I'll show that later on in the course.
Let's take a look at this.
So we have a question mark.
And this is the standard anytime there's a query string.
So we're adding a piece of data to our URL.
It starts off with a question mark.
Which states?
Hey, coming up, we're going to have a bunch of data for you.
The first one is first name, which again corresponds with the name that we have in our form and that
was equal to fake.
So that's property and value.
So you can think of name as property and the value as man.
So last name, first name you can see here that there's an ant sign.
So that's again saying first name equals to fake and last name equals to man and email equals to fake
some gibberish gmail.com.
So this is because of something called the URL encoding and because the URL has special meaning for
some characters such as this and the question mark, it encodes the ad sign with something that it understands,
but it won't affect its encoding.
We have password 1 to 3.
Birthday gender on and cat on.
And I've actually realized why the Volvo and Audi information didn't register.
And that is because for the query string to work, as you can see, it needs to have a name associated
with the value.
So we have first name and fake.
If we look at the radio buttons, we have a name which is gender.
And we have on.
So you see over here how we didn't send any value.
We know that the gender, some button was clicked in the gender.
So it's on, but we don't know which value.
And that is because we should have included.
A value for the mail so that if that's the one that's selected, a value will be sent.
And finally value.
And now same with the select.
We should have had our name of the select field B Cars.
So that now the name can be associated with the value.
So let's give that a try one more time.
I'm going to delete this.
I'm going to save the changes that we just made.
I'm going to make this full screen.
Let's refresh and enter some new information.
Fake new email is new fake at gmail dot com.
Password is one, two, three, four.
This time.
Birthday lost to female dog and Audie I'm going to click register.
And let's see what we have here.
We have first name, fake last name is new email, new fake ID gmail.com.
Password.
One, two, three, four.
Birthday gender is female.
Good dog is on.
So we've selected dog.
That's great.
And then cars is Audie.
There you go.
And that's as complicated as forms are going to get.
You'll encounter this a lot, and there is definitely a most websites that you build, whether it's
a landing page, a website that requires registration.
This is something that you'll see a lot.
Once you understand this, once it makes sense, you know, you can call yourself an HTML developer.
So I'll see you in the next one.
Bye bye.