All language subtitles for 3. Submitting A Form

OK! OK! Andrei, 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" attribute. So this one will be "firstname" and I'm just

going to copy and paste here, just so it'll be a little bit faster.

We have "lastname", "email", "password", "birthday" and we already have these four, the radio buttons, which is good.

And we need here "cat", "dog".

"volvo", "audi" */It's "audi" not "volvo"/*.

Okay. Now we don't need it for the buttons, because well 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", e-mail address is fake password will be "123", birthday, "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 am 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 dot com"

password "123". Uh oh

They know our password, birthday, gender, and Cat "on". we didn't, didn't select "volvo".

Not sure why? I'll take a look at that later.

But, you can see over here, 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 backend or the servers, beca use we have to store this

form information somewhere, so that when we come back onto this page, the Web site remembers us.

This was automatically generated in HTML5, 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, 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 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 backend

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 web sites, they will have, some sort of "action.php" which said, submit

this form.

And when you submit this form, to the backend, 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, Any time 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 "firstname", 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, 'lastname' 'firstname', you can see here, that

there's an "&" sign.

So that's again saying, 'firstname' equals to 'fake' and 'lastname' equals to 'man'.

And 'email' equals to 'fake some jibberish.

Gmail dot 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 'questionmark'. It encodes

the "@" sign with something, that it understands but it won't affect its encoding.

We have 'password' '123', '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 'firstname' 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, 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

"male" so that, if that's the one that is 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, the "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 am going to make this full screen, let's refresh and enter some new information.

'Fake', 'new', e-mail is 'newfake@gmail.com', password is '1234' this time.

Birthday.

Let's do 'female', 'dog' and 'audi' and then I click "Register!". And let's see, what we have here.

We have 'firstname' 'fake', 'lastname' is 'new', 'email' 'newfake@gmail.com', 'password' '1234', 'birthday', 'gender' is

'female'.

Good. 'dog' is 'on'.

OK.

So we've selected dog, that's great.

And then cars is 'audi'.

There you go.

And that's as complicated, as forms are going to get.

You'll encounter this a lot and there is definitely in most websites, that you build whether it's a landing

page, a Web site 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