1
00:00:00,820 --> 00:00:01,360
‫Hey, there.

2
00:00:01,540 --> 00:00:03,250
‫Welcome back, Siobhan, the site.

3
00:00:03,730 --> 00:00:06,840
‫Now let us discuss about forms here.

4
00:00:06,850 --> 00:00:13,300
‫I remove all the previous code and created a new heading that we are open for registration something

5
00:00:13,300 --> 00:00:13,780
‫like this.

6
00:00:14,260 --> 00:00:17,500
‫And now we are going to add a home and complete this whole page.

7
00:00:18,010 --> 00:00:24,430
‫If we have visited any web site on web or maybe on mobile application, chances are you have already

8
00:00:24,430 --> 00:00:25,330
‫used a form.

9
00:00:26,020 --> 00:00:29,280
‫Now forms are pretty important if it was any website.

10
00:00:29,690 --> 00:00:31,630
‫Hey, you can see search to form.

11
00:00:32,380 --> 00:00:33,820
‫Maybe you want to log in.

12
00:00:34,060 --> 00:00:35,620
‫This one is going to be a form.

13
00:00:36,790 --> 00:00:38,560
‫Maybe you want to create an account.

14
00:00:38,770 --> 00:00:45,580
‫This is going to be a form, so every time they require some information from users, I create a form

15
00:00:46,180 --> 00:00:51,040
‫so you can take example our contact form registration form log in form.

16
00:00:51,130 --> 00:00:57,010
‫And there are several other requirements where you need some data from user, and that's where formal

17
00:00:57,020 --> 00:00:59,530
‫consent of pitcher Robert Stock would.

18
00:00:59,920 --> 00:01:00,900
‫It's pretty easy.

19
00:01:00,940 --> 00:01:02,830
‫All you have to do is use form.

20
00:01:03,340 --> 00:01:03,850
‫That's it.

21
00:01:04,180 --> 00:01:08,710
‫And here we can start back on, you know how you can see this action.

22
00:01:08,710 --> 00:01:12,040
‫What is this and how we are going to utilize it for now?

23
00:01:12,040 --> 00:01:12,880
‫Just remove it.

24
00:01:13,420 --> 00:01:16,600
‫We are going to add this again, but for now, remove this.

25
00:01:17,020 --> 00:01:22,030
‫So the basic work with action is what to do with this data that we are collecting with form.

26
00:01:22,300 --> 00:01:26,910
‫So you don't need to worry about the data part you need to understand about this structure, OK?

27
00:01:27,810 --> 00:01:34,110
‫Now, with foam, we can have multiple fields, and every time we see any type of field, it is known

28
00:01:34,110 --> 00:01:35,160
‫as input field.

29
00:01:35,490 --> 00:01:39,000
‫So all you have to do is just jump ahead and add the input field.

30
00:01:39,420 --> 00:01:44,370
‫Now here I'm going to utilize this input and this input field is going to be of different types.

31
00:01:44,900 --> 00:01:48,330
‫Now X-Type basically means that you are going to accept X.

32
00:01:48,780 --> 00:01:52,470
‫Also remember you don't need any closing tag for this input.

33
00:01:53,130 --> 00:01:59,220
‫So if I jump here on here, you can see if input what field, which is inside our form.

34
00:02:00,290 --> 00:02:07,970
‫Now we need something like this that can describe the name, so that is known as label, so we can add

35
00:02:07,970 --> 00:02:08,720
‫a label here.

36
00:02:10,610 --> 00:02:14,150
‫Now her label is utilized just to define that input fee.

37
00:02:14,810 --> 00:02:17,750
‫For now, I'm just utilizing a text maybe name here.

38
00:02:18,830 --> 00:02:26,030
‫And if I save this one, get back here, you can see its name and then my input for how we can do several

39
00:02:26,030 --> 00:02:31,280
‫other things because here we are utilizing by best text, we can utilize other Typekit well.

40
00:02:31,790 --> 00:02:33,560
‫Now what does this what attribute?

41
00:02:33,860 --> 00:02:38,780
‫So I currently, if you click here on name, nothing happens, but what we can do is we can connect

42
00:02:38,780 --> 00:02:39,470
‫both of them.

43
00:02:40,100 --> 00:02:45,890
‫So if I visit Amazon and if I click on email, you can see here and I'm clicking on the label, but

44
00:02:45,890 --> 00:02:47,920
‫I got my cursor here automatically.

45
00:02:47,930 --> 00:02:52,460
‫Maybe here if I click on name, you can see the cursor is inside v name import.

46
00:02:52,940 --> 00:02:55,490
‫So that means they both are connected somewhere.

47
00:02:55,940 --> 00:02:57,650
‫And currently we are not connected.

48
00:02:57,650 --> 00:02:59,090
‫If I click on them, nothing happens.

49
00:02:59,090 --> 00:03:04,130
‫I'm selecting this text, but if I click on Amazon email, you can see it's getting selected.

50
00:03:04,820 --> 00:03:09,290
‫You can see my password is selected, so I need to do something to connect both of them.

51
00:03:09,440 --> 00:03:12,170
‫And that's where this order comes into picture.

52
00:03:12,590 --> 00:03:15,730
‫So I just need to define this label as connected with whom.

53
00:03:16,280 --> 00:03:18,770
‫So ahead, I can say, OK, this is connected to a name.

54
00:03:19,220 --> 00:03:21,470
‫Mark, how does we know that this is name?

55
00:03:21,680 --> 00:03:23,280
‫So we provide an I.D..

56
00:03:25,990 --> 00:03:29,120
‫Now, this label is connected with this import.

57
00:03:29,180 --> 00:03:29,650
‫Why?

58
00:03:30,010 --> 00:03:33,250
‫Because we provided a unique identity to this import.

59
00:03:33,580 --> 00:03:36,430
‫So this is I.D. and this is labeled part.

60
00:03:37,030 --> 00:03:44,290
‫Now if I jump click on name, you can see now I'm able to point my car directly if I click here and

61
00:03:44,380 --> 00:03:45,700
‫you can see that's happening.

62
00:03:46,240 --> 00:03:49,630
‫So that's how you are binding, actually, and this is pretty important.

63
00:03:50,320 --> 00:03:52,330
‫Now, this was just one example of it.

64
00:03:52,330 --> 00:03:54,790
‫And what there are multiple example.

65
00:03:55,150 --> 00:03:56,350
‫We can do a lot more things.

66
00:03:56,350 --> 00:04:02,530
‫So if you see we can walk with text, we can work with radio box checkbox and there is some button and

67
00:04:02,530 --> 00:04:03,160
‫few others.

68
00:04:03,880 --> 00:04:10,910
‫But before doing that, let me tell you, it is a big, important part of success also because it helps

69
00:04:10,910 --> 00:04:16,300
‫us to differentiate any element, any tag with the help of this unique name.

70
00:04:16,820 --> 00:04:19,600
‫Now, head suppose I'm working with an email feed.

71
00:04:19,630 --> 00:04:22,480
‫I can provide an I.D., which will be unique to that.

72
00:04:22,750 --> 00:04:24,730
‫Maybe I'm working on multiple other fields.

73
00:04:24,730 --> 00:04:27,190
‫I can provide different ideas for different elements.

74
00:04:27,400 --> 00:04:28,960
‫And this is pretty important.

75
00:04:29,470 --> 00:04:34,510
‫So if I need to provide any styling in future, I can just say its name and I can provide a different

76
00:04:34,510 --> 00:04:36,640
‫color, different background on anything else.

77
00:04:36,970 --> 00:04:40,360
‫So it'll help us to identify anything that is unique.

78
00:04:41,080 --> 00:04:43,420
‫And now let us try to use label again.

79
00:04:43,870 --> 00:04:47,410
‫And this time I'm going to use email and head.

80
00:04:47,410 --> 00:04:48,880
‫I'm going to provide the text.

81
00:04:51,190 --> 00:04:54,280
‫Space here, and then I'm going to provide input here.

82
00:04:54,700 --> 00:04:57,400
‫And this time this will be immediately.

83
00:04:58,560 --> 00:05:01,500
‫Now again, I'm providing ideas as e-mail.

84
00:05:02,040 --> 00:05:04,140
‫Now, how do you even utilize any other name?

85
00:05:04,470 --> 00:05:07,590
‫Maybe for now, you can use full name here.

86
00:05:08,980 --> 00:05:10,180
‫And full name had.

87
00:05:10,540 --> 00:05:14,050
‫So you don't get confused with this name, attribute anything else.

88
00:05:14,320 --> 00:05:19,690
‫And similarly, you my views here instead of e-mail, you can use mail and mail.

89
00:05:20,700 --> 00:05:25,910
‫But remember, this type is important because this is really fine with HDMI.

90
00:05:26,310 --> 00:05:31,180
‫But here for an it can be of same name and you can give your own name.

91
00:05:31,740 --> 00:05:32,460
‫No problem.

92
00:05:32,850 --> 00:05:35,100
‫If I say that's one, get back here.

93
00:05:35,610 --> 00:05:37,140
‫You can see now we have e-mail.

94
00:05:38,040 --> 00:05:39,750
‫So that's how this is going to work.

95
00:05:40,780 --> 00:05:46,070
‫Now you have collected names, you have collected e-mail and you've got time for us to add a summit

96
00:05:46,130 --> 00:05:46,510
‫button.

97
00:05:46,960 --> 00:05:52,180
‫So there are two options that you can utilize either use, but an option so you can directly use this

98
00:05:52,180 --> 00:05:56,680
‫button and you can define it by a pen, which is going to be somewhat.

99
00:05:57,850 --> 00:06:02,950
‫Hey, you can see these are the multiple options, and you can just see what and what you want to write

100
00:06:02,950 --> 00:06:09,490
‫in this part, and I can say a guy as register on if I jump here, you can see a lot of illustration

101
00:06:09,550 --> 00:06:13,300
‫button every time I click here it is going to go summit.

102
00:06:13,600 --> 00:06:16,690
‫But remember, I have removed action option from here.

103
00:06:17,290 --> 00:06:21,470
‫So this action option takes this data and some mix somewhere.

104
00:06:21,490 --> 00:06:24,420
‫Maybe we need to submit to our different page.

105
00:06:24,430 --> 00:06:30,040
‫Maybe we need to submit to some of them back in file, so we don't need to get into that for now, but

106
00:06:30,040 --> 00:06:31,810
‫we need to discuss about this structure.

107
00:06:32,440 --> 00:06:34,720
‫So that's a basic form that we just created.

108
00:06:35,730 --> 00:06:40,260
‫Now, one problem that I see currently is they all are on a single line.

109
00:06:40,590 --> 00:06:47,190
‫So for temporary purpose, let us introduce our new dog, which is known as break and we call it as

110
00:06:47,190 --> 00:06:47,760
‫we are.

111
00:06:48,060 --> 00:06:54,570
‫So if you use beyond, this is a dog that is going to bring a new line and I'm going to copy this after

112
00:06:54,580 --> 00:06:57,810
‫a report and see this one get back here.

113
00:06:57,840 --> 00:06:59,820
‫Now you can see these are on the front lines.

114
00:07:00,240 --> 00:07:05,310
‫This is a temporary solution because when we work with CFS, we can add more styling.

115
00:07:05,700 --> 00:07:08,100
‫Maybe I need some space between these two.

116
00:07:08,100 --> 00:07:08,880
‫I can do that.

117
00:07:08,880 --> 00:07:10,800
‫Maybe, but then I can do that.

118
00:07:11,190 --> 00:07:14,490
‫But this is a temporary solution that we are going to utilize.

119
00:07:18,220 --> 00:07:19,780
‫OK, this looks fine for now.

120
00:07:20,470 --> 00:07:21,910
‫Now what else we can do?

121
00:07:22,120 --> 00:07:24,670
‫I think we can use it for radio buttons.

122
00:07:24,670 --> 00:07:26,530
‫We can use it for checkbox.

123
00:07:26,890 --> 00:07:29,110
‫You can use it for dropdown menus.

124
00:07:29,380 --> 00:07:34,120
‫But before that, let us also talk about controls that they have like.

125
00:07:34,480 --> 00:07:36,010
‫These are pretty powerful.

126
00:07:36,010 --> 00:07:39,730
‫We can add more attributes here and control things so any quickly.

127
00:07:40,090 --> 00:07:42,880
‫For example, at this point of time, I don't have any restriction.

128
00:07:42,880 --> 00:07:47,260
‫I can write any number of content that has any number of characters in this name.

129
00:07:47,710 --> 00:07:49,550
‫Similarly, I can write anything right.

130
00:07:50,230 --> 00:07:56,680
‫Well, we can add certain modifications are in restriction like minimum length, maximum length.

131
00:07:57,010 --> 00:08:03,820
‫Also, if I try to submit this random gibberish content, this is going to give a pre-defined error

132
00:08:03,820 --> 00:08:06,180
‫that you should have acted in your email.

133
00:08:06,850 --> 00:08:11,590
‫So there are certain conditions which are predefined with these final form, and this is pretty good.

134
00:08:12,220 --> 00:08:18,520
‫So we have basic validation that if someone is entering wrong content with that email field, they will

135
00:08:18,520 --> 00:08:19,240
‫be notified.

136
00:08:19,730 --> 00:08:22,840
‫Here, let me talk about minimum and maximum length.

137
00:08:22,930 --> 00:08:24,990
‫So if you jump over there and could be.

138
00:08:26,700 --> 00:08:32,100
‫You can define mainland, so you can define that, OK, our use, and if it's your username field,

139
00:08:32,100 --> 00:08:35,940
‫you can define it should be eight character, five character, something like that.

140
00:08:36,300 --> 00:08:40,530
‫And maxlength can be maybe 20 or maybe 10 for now.

141
00:08:40,950 --> 00:08:50,010
‫And if I save this one and get back in and if I write a random user name, you can say I'm typing,

142
00:08:50,010 --> 00:08:51,830
‫but I can not write anything out.

143
00:08:52,360 --> 00:08:56,460
‫Or maybe some content like this.

144
00:08:57,440 --> 00:09:01,760
‫So I cannot right after four, so that's how it is going to work.

145
00:09:02,090 --> 00:09:05,090
‫Similarly, now we have restriction, maybe for one.

146
00:09:05,630 --> 00:09:07,460
‫So if I ride one and then.

147
00:09:08,850 --> 00:09:12,930
‫You can say what an error, because I required a minimum length of five.

148
00:09:14,020 --> 00:09:19,300
‫And I currently have only one assailant, so maybe shoot, I'm sure I.

149
00:09:20,530 --> 00:09:22,990
‫This is a notification pretty quick pop up.

150
00:09:23,920 --> 00:09:27,380
‫So that's how we are going to utilize different parameters now.

151
00:09:27,490 --> 00:09:32,380
‫In the next lecture, let us continue our form and discuss more about these radio buttons, dropdown

152
00:09:32,380 --> 00:09:35,590
‫menu and few other things that we can utilize in our form.

153
00:09:36,550 --> 00:09:38,080
‫I hope this lecture was helpful.

154
00:09:38,200 --> 00:09:39,260
‫Thank you for calling.

155
00:09:39,280 --> 00:09:41,110
‫And I ask you guys in the next one.