1
00:00:01,200 --> 00:00:01,520
All right.

2
00:00:01,530 --> 00:00:07,050
So in the next few videos we're going to focus on each team all forms so forms are how we get input

3
00:00:07,590 --> 00:00:14,010
from a user whether it's to sign up for a page to comment on a photo to upload a photo to pick a color

4
00:00:14,010 --> 00:00:14,910
to pick a date.

5
00:00:14,940 --> 00:00:19,650
There's so many different things to do with forms and it's actually relatively simple and edged him

6
00:00:19,650 --> 00:00:19,840
out.

7
00:00:19,840 --> 00:00:23,450
There's just two important elements that we're going to learn about here.

8
00:00:24,270 --> 00:00:30,840
So we're going to focus on the form tag the input tag the label tag and then we're also going to finish

9
00:00:30,840 --> 00:00:36,600
up by learning about validations for our data how do we make sure someone fills in part of reform.

10
00:00:36,600 --> 00:00:41,860
Someone cannot leave our password blank or email blank or something like that.

11
00:00:41,910 --> 00:00:46,900
So to start let's just take a quick survey of some of the forms you encounter in day to day life.

12
00:00:46,980 --> 00:00:51,330
So I have some images here from sites like Twitter Facebook Google.

13
00:00:51,690 --> 00:00:54,280
Let's take a look and break some of these down.

14
00:00:54,300 --> 00:00:57,420
So here's the log in form for Facebook.

15
00:00:57,600 --> 00:01:03,530
We have a place where we can type some text in the text and put another input where we type passwords

16
00:01:03,530 --> 00:01:04,050
in.

17
00:01:04,140 --> 00:01:07,920
Most likely when you type your password there it's dotted down so you don't actually see the password

18
00:01:07,920 --> 00:01:08,190
.

19
00:01:08,340 --> 00:01:09,990
And then a checkbox.

20
00:01:10,260 --> 00:01:14,500
And when we click this button it submits this entire thing.

21
00:01:14,640 --> 00:01:16,160
So it groups these together.

22
00:01:16,290 --> 00:01:20,370
We don't have one button for email one button for password one button for the check box.

23
00:01:20,370 --> 00:01:22,110
It all goes at once.

24
00:01:22,110 --> 00:01:23,910
Same thing here when we sign up.

25
00:01:23,910 --> 00:01:29,560
We've got more inputs five different text inputs three different dropdown menus.

26
00:01:29,580 --> 00:01:33,790
These are called select tags and then two things called radio buttons.

27
00:01:34,050 --> 00:01:39,900
And then finally a sign up button that it's going to take all of this and send it somewhere for Facebook

28
00:01:39,900 --> 00:01:40,760
to use.

29
00:01:41,100 --> 00:01:48,210
So what we're going to learn today is the foreign tag and these forms are going to be a little bit dumb

30
00:01:48,210 --> 00:01:48,450
.

31
00:01:48,450 --> 00:01:51,730
They're not going to actually do anything.

32
00:01:51,870 --> 00:01:53,940
We need to actually have a backend set up.

33
00:01:53,950 --> 00:01:58,050
We need a database we need some logic and some back end code to do anything with the form.

34
00:01:58,050 --> 00:02:02,450
So for now they're just going to look like this will be able to recreate this.

35
00:02:02,640 --> 00:02:08,340
But when you click sign up or you click log in or you search on google our forums are actually going

36
00:02:08,340 --> 00:02:09,790
to do any of that logic.

37
00:02:10,110 --> 00:02:13,550
They're just going to be the front end user facing part of things.

38
00:02:13,950 --> 00:02:15,780
So the first thing is the forum tag.

39
00:02:16,080 --> 00:02:22,920
So the forum tag is basically a shell or a container for all of these different types of inputs.

40
00:02:22,920 --> 00:02:26,710
So this is one forum tag around all of this.

41
00:02:26,910 --> 00:02:30,570
This might be one form tag around all of these and so on.

42
00:02:30,570 --> 00:02:36,030
Here's another form tag by just making a forum tag you don't actually see anything on the page.

43
00:02:36,240 --> 00:02:38,270
We'll see that in just a second.

44
00:02:38,280 --> 00:02:41,630
Basically it's just a container and we put all of our different inputs in there.

45
00:02:41,640 --> 00:02:47,540
So checkboxes and buttons and dropped on menus and colored pictures all go inside of a formed egg.

46
00:02:48,090 --> 00:02:52,320
So there are two important attributes will be spending some more time with this when we get to backend

47
00:02:52,360 --> 00:02:52,560
.

48
00:02:52,770 --> 00:02:58,410
So try not to get hung up on exactly how this works but a form is going to send a request somewhere

49
00:02:58,410 --> 00:03:01,980
it sends data from the form to a server somewhere.

50
00:03:02,040 --> 00:03:06,840
So the first part action is going to specify where to send the data.

51
00:03:07,320 --> 00:03:08,550
Is it going to Google.

52
00:03:08,580 --> 00:03:13,830
Is he going to sign up page is it going to are sign out we're going to learn a lot more about how we

53
00:03:13,830 --> 00:03:16,570
actually do that on the back end section of this class.

54
00:03:16,800 --> 00:03:21,180
And then the second part is what type of HSDPA request to send.

55
00:03:21,780 --> 00:03:25,230
So we could send a get request or we could send a post request.

56
00:03:25,800 --> 00:03:28,930
And again this is another thing we're going to spend a lot lot more time on.

57
00:03:29,130 --> 00:03:35,220
But the simple generalized version we make a get request when we're doing something like searching or

58
00:03:35,220 --> 00:03:41,280
retrieving data we're trying to get information and we make a post request when we're sending data that

59
00:03:41,280 --> 00:03:45,770
we want to be added to a database posted to a server.

60
00:03:45,780 --> 00:03:52,440
So in these examples this here when you search on Google you hit enter or you click and search that's

61
00:03:52,440 --> 00:03:54,070
going to make a request.

62
00:03:54,180 --> 00:03:56,160
It's not actually adding anything to the database.

63
00:03:56,160 --> 00:03:57,770
It's not changing anything.

64
00:03:57,840 --> 00:04:00,630
It's purely just getting data back searching.

65
00:04:00,710 --> 00:04:03,070
It's getting data it's a get request.

66
00:04:03,450 --> 00:04:08,420
These here though to sign up for Facebook or sign up for Twitter.

67
00:04:08,460 --> 00:04:14,040
Those are going to be post requests when you typed in data and you click sign up it takes your data

68
00:04:14,340 --> 00:04:17,370
and actually adds it to Twitter's database.

69
00:04:17,370 --> 00:04:21,860
So again we're going to actually work on that quite a bit later in this class.

70
00:04:21,990 --> 00:04:26,440
So for now just be familiar with action and method and the fact that they exist.

71
00:04:26,640 --> 00:04:30,480
So the input tag is what actually goes inside of our forms.

72
00:04:30,600 --> 00:04:37,020
It's what's going to create the different inputs that we see here a text input a password input a radio

73
00:04:37,020 --> 00:04:38,120
button.

74
00:04:38,190 --> 00:04:40,020
It doesn't actually create a dropdown menu.

75
00:04:40,020 --> 00:04:45,360
So we'll talk about that in the later exercise but it creates all sorts of different inputs for user

76
00:04:45,360 --> 00:04:46,580
input.

77
00:04:46,620 --> 00:04:48,840
So I have a few examples here.

78
00:04:48,900 --> 00:04:53,130
They're all exactly the same except for this type attribute.

79
00:04:53,310 --> 00:04:57,210
So if type equals text we get a text box type equals date.

80
00:04:57,290 --> 00:04:59,970
You get this little date picker type equals color.

81
00:05:00,270 --> 00:05:04,230
You get a color picker Eiffel's file we get a file picker type Pickle's checkbox.

82
00:05:04,260 --> 00:05:05,680
We get a checkbox.

83
00:05:05,850 --> 00:05:11,110
So I'm actually going to pull up endian and search for input.

84
00:05:11,110 --> 00:05:18,660
And as I do that you'll see as I scroll down to attributes under type there's a list of all the possible

85
00:05:18,660 --> 00:05:20,970
types that we can specify.

86
00:05:21,550 --> 00:05:23,440
And there's about 30 or 40 of them here.

87
00:05:23,790 --> 00:05:27,800
And to be honest there's a lot on here that you probably will never need to use.

88
00:05:28,110 --> 00:05:30,810
But there are a few that you use all the time.

89
00:05:30,810 --> 00:05:32,660
And so we're going to really focus on those.

90
00:05:32,700 --> 00:05:40,410
Those are things like text email password date button submit then some of the other ones like color

91
00:05:40,410 --> 00:05:40,750
.

92
00:05:41,040 --> 00:05:43,830
You may not use very often at all.

93
00:05:43,830 --> 00:05:46,120
I definitely wish we had more chances to do color pictures.

94
00:05:46,130 --> 00:05:50,910
It's my favorite of the inputs but I want you to be aware that there's a lot of different choices here

95
00:05:50,910 --> 00:05:53,820
.

96
00:05:53,820 --> 00:05:59,060
So then to make a form we just take a form tag and we fill it with some input tags.

97
00:05:59,160 --> 00:06:00,960
So here's a really simple example.

98
00:06:00,960 --> 00:06:02,230
We have two inputs.

99
00:06:02,360 --> 00:06:06,830
Equals text type Pickle's password and it makes us this nice form here.

100
00:06:07,140 --> 00:06:12,190
And you can see as we fill out this first type equals text it just looks like regular text.

101
00:06:12,280 --> 00:06:17,550
And as we fill out the type equals password it gives just those dotted the hidden password fields.