1
00:00:00,900 --> 00:00:06,510
OK, OK, Andre, can we finally submit this form, all right, and this video will finally see what

2
00:00:06,510 --> 00:00:07,890
happens when we submit this form.

3
00:00:08,850 --> 00:00:16,650
But there is one last thing that we need to include, and that is the name attributes.

4
00:00:16,650 --> 00:00:20,430
And then I'll explain towards the end of this video why we need those.

5
00:00:20,700 --> 00:00:25,490
So we want to add in each one of our fields a name, actually.

6
00:00:25,520 --> 00:00:27,090
So this one will be first name.

7
00:00:27,960 --> 00:00:31,420
And I'm just going to copy and paste here just so be a little bit faster.

8
00:00:31,470 --> 00:00:34,290
We have last name, email.

9
00:00:36,030 --> 00:00:38,220
Password birthday.

10
00:00:39,970 --> 00:00:43,930
We already have these for the radio buttons, which is good.

11
00:00:45,490 --> 00:00:51,890
And we need here cat, dog, Volvo, Volvo.

12
00:00:53,020 --> 00:00:56,770
OK, and we don't need it for the buns, because while there's no user information there.

13
00:00:57,730 --> 00:01:03,640
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

14
00:01:03,640 --> 00:01:08,320
the page and let's enter some fake data and see what happens.

15
00:01:09,070 --> 00:01:15,490
So I'm going to say fake man email addresses, fake password would be one, two, three.

16
00:01:16,450 --> 00:01:19,120
Birthday of the male.

17
00:01:20,030 --> 00:01:27,380
With a cat and has an Audy, I'm going to click register now, but keep an eye out up over here to see

18
00:01:27,380 --> 00:01:28,400
what happens when I click.

19
00:01:30,620 --> 00:01:38,580
Did you catch that let's copy this, because when I clicked register, this got attached, I'm going

20
00:01:38,600 --> 00:01:43,700
to minimize this and print this out here so we can see it for ourselves.

21
00:01:44,860 --> 00:01:50,350
First, we have a question mark, then first name fake, that's exactly why we entered, we have last

22
00:01:50,350 --> 00:01:53,920
name, man, email is fake.

23
00:01:53,920 --> 00:01:55,720
Something, something Gmail dot com.

24
00:01:58,200 --> 00:02:03,390
Password, one, two, three, oh, they know our password, birthday gender.

25
00:02:04,520 --> 00:02:13,010
And get on, we don't select Valvo, not sure why, I'll take a look at that later, but you can see

26
00:02:13,010 --> 00:02:20,870
over here that the value that the values that we entered into our form were just attached to this link.

27
00:02:21,320 --> 00:02:23,390
And this is actually called query strings.

28
00:02:23,630 --> 00:02:30,770
And what it is, it's one way for us to send our information to the back end or the service because

29
00:02:30,770 --> 00:02:36,650
we have to store this form information somewhere so that when we come back onto this page, the website

30
00:02:36,650 --> 00:02:44,720
remembers that this was automatically generated in Nacionale five with a form but form.

31
00:02:45,730 --> 00:02:54,310
Was using an attribute called Get and this get, if I left it as this will do the exact same thing.

32
00:02:54,490 --> 00:03:01,130
It will attach the form information to the URL and send it to the server.

33
00:03:01,450 --> 00:03:09,100
There is another option where you can do post and you can try it on your own here, but you wouldn't

34
00:03:09,220 --> 00:03:11,500
see any query parameters.

35
00:03:11,680 --> 00:03:13,290
So this wouldn't change the bar.

36
00:03:13,300 --> 00:03:20,110
The top won't change, and that is because it will be attached to the body of the request, which we'll

37
00:03:20,110 --> 00:03:22,000
get into when we get to that section.

38
00:03:22,030 --> 00:03:27,430
I don't want to confuse you too much, but you can see the difference here of why we might want to use

39
00:03:27,430 --> 00:03:29,620
post instead of get because.

40
00:03:29,620 --> 00:03:33,690
Well, what if somebody was over my shoulder and they can see my password right there in the bar?

41
00:03:34,210 --> 00:03:40,270
I just want you to get comfortable with the idea that we are sending this information to the back end.

42
00:03:40,480 --> 00:03:44,320
The way we handle that, we'll get into later on in the course.

43
00:03:44,320 --> 00:03:46,830
Right now, we're just focusing on the front end.

44
00:03:47,560 --> 00:03:55,150
The last thing I want to show you was that form also has a action attribute which used to get used a

45
00:03:55,150 --> 00:03:55,540
lot.

46
00:03:55,570 --> 00:04:06,070
If you saw old based websites, they'll have some sort of an action dot FB which said submit this form.

47
00:04:06,070 --> 00:04:13,870
And when you submit this form to the back end to the server, run this script, this file that's on

48
00:04:13,870 --> 00:04:14,410
the server.

49
00:04:14,830 --> 00:04:16,960
But there are better ways of doing this now.

50
00:04:16,960 --> 00:04:18,850
So I'll show that later on.

51
00:04:18,850 --> 00:04:19,390
And of course.

52
00:04:23,040 --> 00:04:31,380
Let's take a look at this so we have a question mark, and this is the standard, any time there's a

53
00:04:31,380 --> 00:04:32,000
question.

54
00:04:32,010 --> 00:04:36,190
So we're adding a piece of data to our URL.

55
00:04:36,630 --> 00:04:42,180
It starts off with the question mark, which states, hey, coming up, we're going to have a bunch

56
00:04:42,210 --> 00:04:43,290
of data for you.

57
00:04:43,950 --> 00:04:49,650
The first one is first name, which again corresponds with the name that we have in our form.

58
00:04:50,280 --> 00:04:52,090
And that was equal to fake.

59
00:04:52,680 --> 00:04:55,440
So that's property and value.

60
00:04:56,010 --> 00:05:03,350
So you can think of name as property and the value as men.

61
00:05:04,260 --> 00:05:06,870
So last name, first name.

62
00:05:06,880 --> 00:05:08,880
You can see here that there's an ad sign.

63
00:05:08,890 --> 00:05:16,230
So that's again saying first name equals to fake and last name equals to man and email equals to fake

64
00:05:16,410 --> 00:05:18,430
some gibberish Gmail dot com.

65
00:05:18,750 --> 00:05:25,020
This is because of something called the URL encoding and because the URL has special meaning for some

66
00:05:25,020 --> 00:05:34,410
characters such as this and the questionmark, it encodes the at sign with something that it understands,

67
00:05:34,410 --> 00:05:36,750
but it won't affect its encoding.

68
00:05:37,710 --> 00:05:38,640
We have a password.

69
00:05:38,640 --> 00:05:42,960
One, two, three birthday gender on and cat on.

70
00:05:43,260 --> 00:05:50,280
And I've actually realized why the Volvo and Audi information didn't register.

71
00:05:50,670 --> 00:05:57,420
And that is because for the query string to work, as you can see, it needs to have a name associated

72
00:05:57,420 --> 00:05:57,960
with the value.

73
00:05:57,960 --> 00:05:59,490
So we have first name and fake.

74
00:05:59,790 --> 00:06:03,900
If we look at the radio buttons, we have a name, which is gender.

75
00:06:05,420 --> 00:06:16,610
And we have on so you see over here how we didn't send any value, we know that the gender someone was

76
00:06:16,610 --> 00:06:20,870
clicked and the gender, so it's on, but we don't know which value.

77
00:06:21,500 --> 00:06:24,410
And that is because we should have included.

78
00:06:26,120 --> 00:06:32,480
A value for the mail, so that if that's the one that selected, a value will be sent.

79
00:06:33,580 --> 00:06:44,740
And finally, value, and now same with the select, we should have had our name of the select field.

80
00:06:45,660 --> 00:06:47,100
B, cars.

81
00:06:48,190 --> 00:06:51,640
So that now the name can be associated with the value.

82
00:06:53,110 --> 00:06:56,890
So let's give that a try one more time, I'm going to delete this.

83
00:06:58,080 --> 00:07:00,670
I'm going to save the changes that we just made.

84
00:07:01,350 --> 00:07:03,180
I'm going to make this full screen.

85
00:07:03,720 --> 00:07:08,130
Let's refresh and enter some new information.

86
00:07:08,400 --> 00:07:13,590
Fake new email is new fake.

87
00:07:14,250 --> 00:07:18,810
A Gmail account password is one, two, three, four this time.

88
00:07:20,230 --> 00:07:28,870
Birthday, lusty female dog and Audie, I'm going to click register.

89
00:07:30,590 --> 00:07:38,790
And let's see what we have here, we have first name, fake last name is new email, new fake, a Gmail

90
00:07:38,810 --> 00:07:41,360
account password, one to three for birthday.

91
00:07:41,600 --> 00:07:43,240
Gender is female.

92
00:07:43,640 --> 00:07:45,500
Good dog is on.

93
00:07:45,500 --> 00:07:47,030
OK, so we've selected dog.

94
00:07:47,030 --> 00:07:47,480
That's great.

95
00:07:47,480 --> 00:07:49,400
And then cars is Audy.

96
00:07:49,850 --> 00:07:50,420
There you go.

97
00:07:52,630 --> 00:08:00,190
And that's as complicated as forms are going to get, you'll encounter this a lot, and there is definitely

98
00:08:00,190 --> 00:08:06,580
and most websites that you build, whether it's a landing page, a website that requires registration,

99
00:08:07,220 --> 00:08:11,980
this is something that you'll see a lot once you understand this, once it makes sense.

100
00:08:12,310 --> 00:08:14,500
But you can call yourself an e-mail developer.

101
00:08:15,010 --> 00:08:16,850
So I'll see you in the next one.

102
00:08:17,320 --> 00:08:17,680
Bye bye.