OK, OK, Andre, can we finally submit this form, all right, and this video will 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 then 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, actually.
So this one will be first name.
And I'm just going to copy and paste here just so 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, Volvo.
OK, and we don't need it for the buns, 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 addresses, fake password would be one, two, three.
Birthday of the male.
With a cat and has an Audy, 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 why we entered, we have last
name, man, email is fake.
Something, something Gmail dot com.
Password, one, two, three, oh, they know our password, birthday gender.
And get on, we don't select Valvo, 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 were 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 service because
we have to store this form information somewhere so that when we come back onto this page, the website
remembers that this was automatically generated in Nacionale five with a form but form.
Was using an attribute called Get and this get, if I left it as this will do the exact same thing.
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.
The top won't 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 can see my password right there in the bar?
I just want 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 based websites, they'll have some sort of an action dot FB 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.
And of course.
Let's take a look at this so we have a question mark, and this is the standard, any time there's a
question.
So we're adding a piece of data to our URL.
It starts off with the 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 men.
So last name, first name.
You can see here that there's an ad 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 dot com.
This is because of something called the URL encoding and because the URL has special meaning for some
characters such as this and the questionmark, it encodes the at sign with something that it understands,
but it won't affect its encoding.
We have a password.
One, two, three 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 someone was
clicked and 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 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.
A Gmail account password is one, two, three, four this time.
Birthday, lusty 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, a Gmail
account password, one to three for birthday.
Gender is female.
Good dog is on.
OK, so we've selected dog.
That's great.
And then cars is Audy.
There you go.
And that's as complicated as forms are going to get, you'll encounter this a lot, and there is definitely
and 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.
But you can call yourself an e-mail developer.
So I'll see you in the next one.
Bye bye.