1
00:00:00,750 --> 00:00:04,530
So the next thing that we want to do here is introduce the forum tag.

2
00:00:04,800 --> 00:00:10,280
Right now what we have is something we might call a form in English but technically unhitched him out

3
00:00:10,280 --> 00:00:10,310
.

4
00:00:10,320 --> 00:00:11,860
It's not considered a form.

5
00:00:11,970 --> 00:00:15,210
It has just three inputs that are not related.

6
00:00:15,210 --> 00:00:16,730
So remember the point of a form.

7
00:00:16,740 --> 00:00:19,360
It's just a container where we put our inputs.

8
00:00:19,380 --> 00:00:24,110
So yes they can exist individually individually outside of a form and sometimes we will have it.

9
00:00:24,330 --> 00:00:30,600
But if this is one form one packaged up thing that we want to submit together then it makes sense for

10
00:00:30,600 --> 00:00:32,370
us to make a form tag.

11
00:00:33,150 --> 00:00:39,970
So I'm going to go ahead and put this data in the form tag and save it.

12
00:00:40,740 --> 00:00:45,010
And remember in a form there are two attributes we discussed.

13
00:00:45,020 --> 00:00:53,640
There's action which is where the form sends data to.

14
00:00:53,640 --> 00:01:03,940
And then there's also the method which is what HTP method GET or POST.

15
00:01:04,080 --> 00:01:08,800
And just as a refresher that shortcut command slash to get the comment.

16
00:01:09,330 --> 00:01:10,570
OK.

17
00:01:10,680 --> 00:01:15,900
So if he refresh the page nothing will change or it will appear like nothing changes.

18
00:01:15,900 --> 00:01:18,310
There is one really small change.

19
00:01:18,390 --> 00:01:29,730
So if I add some text on here and I don't have the form tag or refresh the page you'll see that everything

20
00:01:29,730 --> 00:01:38,850
is in line as soon as I add the form tag However the form pushes it's a block of Allaman it pushes down

21
00:01:38,850 --> 00:01:40,750
that text to the new line.

22
00:01:41,130 --> 00:01:49,080
So a very minor thing but other than that it looks identical there is functionally a change though my

23
00:01:49,080 --> 00:01:49,530
form.

24
00:01:49,530 --> 00:01:53,660
Now if I refresh the page it actually does something it's not very impressive.

25
00:01:53,700 --> 00:01:58,820
But if I fill out my username and password and I hit submit.

26
00:01:58,860 --> 00:02:04,710
Pay attention right here and you'll see my page actually refreshes my data disappears.

27
00:02:04,850 --> 00:02:10,350
This button to refresh the page is engaged briefly as you can see.

28
00:02:10,470 --> 00:02:13,140
So my form is being sent.

29
00:02:13,140 --> 00:02:16,910
The thing is it's just being sent to the same place where I currently am.

30
00:02:16,920 --> 00:02:21,300
So by default if I don't specify an action it's going to go to the exact same place where I am just

31
00:02:21,300 --> 00:02:22,410
refresh the page.

32
00:02:22,560 --> 00:02:26,580
And if I don't specify a method it's going to be a GET request.

33
00:02:27,060 --> 00:02:28,770
So we could go in and change that.

34
00:02:28,810 --> 00:02:33,250
We could say action and method equal.

35
00:02:33,270 --> 00:02:45,240
And let's change in something else let's do action equals HTP colon slash slash Wikipedia dot com method

36
00:02:46,030 --> 00:02:51,750
would be a GET request or refresh the page let's fill out some data in here.

37
00:02:51,870 --> 00:02:54,090
Fill up my form click submit.

38
00:02:54,090 --> 00:02:59,490
This time it's not going to send the request to the same page I am on to send a request to Wikipedia

39
00:03:03,420 --> 00:03:06,220
and technically this should be Wikipedia.

40
00:03:06,540 --> 00:03:10,780
But they're smart enough that they realize people try and go to dot com all the time and it just redirects

41
00:03:10,780 --> 00:03:12,160
to dot org.

42
00:03:13,020 --> 00:03:16,120
OK so that's a point of action it's where we send data to.

43
00:03:16,140 --> 00:03:21,530
Of course we're not really going to send data to Wikipedia or Google or Facebook from a forum.

44
00:03:21,600 --> 00:03:26,940
We're going to send it to our own server our own back and that we create but we don't have that yet

45
00:03:26,940 --> 00:03:27,230
.

46
00:03:27,240 --> 00:03:32,910
So for now we're just demonstrating that we can we can alter where the data goes by altering the action

47
00:03:32,910 --> 00:03:33,430
.

48
00:03:33,510 --> 00:03:39,900
So I'm going to go ahead and get rid of both of these and just keep it as form where action is going

49
00:03:39,900 --> 00:03:44,510
to refresh the same page that we're on and method is going to be get.

50
00:03:45,180 --> 00:03:50,880
And if you're feeling at all confused with that we will spend a lot lot of time talking about HTP requests

51
00:03:50,910 --> 00:03:52,660
and methods and actions.

52
00:03:53,070 --> 00:03:54,350
So we will get there.

53
00:03:54,360 --> 00:03:58,630
For now this is purely about the front end of making the form.

54
00:03:58,740 --> 00:04:04,380
So there's one other thing I want to talk about here is is that when we actually submit this form the

55
00:04:04,380 --> 00:04:10,850
data is sent along with this request and there's a way for us to see that.

56
00:04:10,860 --> 00:04:15,250
So if we give a name to each piece of data that we want to be sent.

57
00:04:15,300 --> 00:04:16,720
So it's a name attribute.

58
00:04:17,010 --> 00:04:23,370
I'm going to call it user name on the user name and put and then I'm going to say name equals password

59
00:04:23,870 --> 00:04:27,550
on the password input and I save this.

60
00:04:27,550 --> 00:04:32,060
I type in a username the password will be test one two three.

61
00:04:32,160 --> 00:04:40,680
Pay attention up here as I submit this and you'll see I get my data added in this new format that we

62
00:04:40,680 --> 00:04:41,250
haven't seen.

63
00:04:41,250 --> 00:04:42,720
It's called a query string.

64
00:04:42,750 --> 00:04:46,580
Another one of those topics will be devoting a lot more time to and we get to express.

65
00:04:46,710 --> 00:04:52,410
Basically it's a question mark followed by key value pairs separated by ampersands.

66
00:04:52,860 --> 00:04:55,830
So I have a user name which is the name that I set.

67
00:04:55,950 --> 00:05:00,850
Equals resti which is the value from that input password is the name I set.

68
00:05:00,900 --> 00:05:04,120
Equals Test 1 2 3.

69
00:05:04,290 --> 00:05:09,150
So the whole point of this is that we can give names to raw data to our pieces of data so that we can

70
00:05:09,150 --> 00:05:10,890
then retrieve them later.

71
00:05:10,890 --> 00:05:14,830
So of course we wouldn't actually send a password through the Euro.

72
00:05:14,940 --> 00:05:19,060
We don't actually let you know a user any user see the password.

73
00:05:19,290 --> 00:05:23,830
And that's because we use a post request usually rather than a get request.

74
00:05:23,850 --> 00:05:25,690
There are ways of getting around this.

75
00:05:25,710 --> 00:05:27,550
Again this is all for later in the class.

76
00:05:27,630 --> 00:05:31,380
But what's important is that this isn't something I'm showing to you because you'll do it all the time

77
00:05:31,380 --> 00:05:31,400
.

78
00:05:31,410 --> 00:05:36,540
I'm showing it to you because it illustrates the fact that when we type something into a form and give

79
00:05:36,540 --> 00:05:42,420
it some data and they click submit the data is taken out of that form and a request is sent somewhere

80
00:05:42,420 --> 00:05:42,510
.

81
00:05:42,570 --> 00:05:45,670
And in this case it's sent to the exact same place where we already are.

82
00:05:45,810 --> 00:05:53,190
But if we change this to be action and go back to Wikipedia

83
00:05:57,920 --> 00:05:59,960
Wikipedia or we

84
00:06:02,870 --> 00:06:09,080
use name Rusty password test one two three you'll see it takes me to Wikipedia.

85
00:06:09,420 --> 00:06:11,220
And it adds my data here.

86
00:06:11,280 --> 00:06:14,530
So we've successfully sent a request using that form.

87
00:06:14,910 --> 00:06:21,480
And in that request the data was extracted from the username and password fields and then sent along

88
00:06:21,480 --> 00:06:23,240
with the request.

89
00:06:23,280 --> 00:06:27,030
So that's the foundation of all the types of forms that we're going to do.

90
00:06:27,030 --> 00:06:32,540
It's not always a get request but our forms later on are going to extract data out send it somewhere

91
00:06:32,940 --> 00:06:35,940
and then we'll process the data and receive it on the back backend