1
00:00:00,540 --> 00:00:03,880
So today we are going to work with the farms.

2
00:00:04,160 --> 00:00:04,800
So this is a.

3
00:00:05,460 --> 00:00:10,980
If you have any doubt regarding the architecture structure of Guanglie, you can refer to the shackles

4
00:00:11,040 --> 00:00:11,470
as well.

5
00:00:12,000 --> 00:00:15,360
So first thing alone, let's get started with this.

6
00:00:15,690 --> 00:00:20,010
So forms are made to for the user input.

7
00:00:20,020 --> 00:00:26,250
So forms that you can make according to your demand and requirement to do will create a form and then,

8
00:00:26,940 --> 00:00:34,260
well, we'll use forms and then we are going to do we are going to integrate the front end part of our

9
00:00:34,260 --> 00:00:34,610
form.

10
00:00:34,620 --> 00:00:42,180
Will we create a response to form and then will integrate the back and part of our logic with the front

11
00:00:42,180 --> 00:00:42,650
end part.

12
00:00:42,660 --> 00:00:47,210
So we are going to get how we see how we can integrate Fallston.

13
00:00:47,210 --> 00:00:53,370
Then we'll see how do we can submit forms using the one with the request method and one with the method.

14
00:00:53,640 --> 00:00:56,920
Then we will figure out the difference, what the difference between the two.

15
00:00:57,150 --> 00:00:58,920
So let's get started with this.

16
00:00:59,170 --> 00:00:59,860
So today.

17
00:01:00,270 --> 00:01:01,490
So this is my project.

18
00:01:01,890 --> 00:01:11,230
So first I will run my server, so I'll type Python, manage to run server and I will move to my localhost

19
00:01:11,460 --> 00:01:11,770
style.

20
00:01:11,820 --> 00:01:18,750
Refresh this page so the server will get started so you can see the server has started.

21
00:01:19,140 --> 00:01:21,580
So what we are going to do today.

22
00:01:21,930 --> 00:01:24,660
So what we are going to do first site create a part.

23
00:01:25,820 --> 00:01:27,620
The other part, but.

24
00:01:30,220 --> 00:01:31,870
I quit my phone.

25
00:01:34,250 --> 00:01:37,640
OK, and I'll great.

26
00:01:38,650 --> 00:01:50,380
A view with the name, you start my phone and I'll give this your name, is it to my phone as well?

27
00:01:50,620 --> 00:01:51,130
Look at that.

28
00:01:51,130 --> 00:01:52,260
It looks pretty fine.

29
00:01:52,780 --> 00:01:59,770
So also we create a form, and so I'll move to reduce your profile.

30
00:02:01,660 --> 00:02:03,920
OK, so here's my file.

31
00:02:04,810 --> 00:02:06,110
So what I'm going to do.

32
00:02:06,670 --> 00:02:18,730
So what I'm going to do and I'll define a view and find my phone and I'll take a request as a barometer.

33
00:02:20,450 --> 00:02:27,950
And I'll render an estimated page on what I'm going to do, I'm going to type written.

34
00:02:30,090 --> 00:02:36,330
OK, return, render, request.

35
00:02:38,160 --> 00:02:42,480
And I'll make an estimate, pitch my phone.

36
00:02:44,210 --> 00:02:45,460
Don't estimate.

37
00:02:46,220 --> 00:02:55,820
So this was prettifying, so what I need to do, so I need to define my home, not inside my template

38
00:02:55,820 --> 00:02:56,330
page.

39
00:02:57,910 --> 00:03:02,560
OK, I'll move to my template so I create a new file.

40
00:03:05,190 --> 00:03:13,800
My phone dot Edmond, so this looks pretty fine, so what are going to do today?

41
00:03:14,580 --> 00:03:16,170
What are you going to do to this?

42
00:03:16,260 --> 00:03:21,560
I found it on my phone, got a cable page, so I have to find a few links.

43
00:03:21,840 --> 00:03:23,130
We can move to this link.

44
00:03:25,120 --> 00:03:33,010
And what we can do will move to this thing and what we can do, we look how we can create responsive

45
00:03:33,010 --> 00:03:34,450
forms using bootstrap.

46
00:03:34,810 --> 00:03:40,540
So this is going to be very good so we can see how we can create responsive form using bootstrap and

47
00:03:40,540 --> 00:03:41,560
what we are going to do.

48
00:03:42,970 --> 00:03:47,480
So this is like a box container with an email address and a password.

49
00:03:47,560 --> 00:03:49,000
Then check me out, submit.

50
00:03:49,480 --> 00:03:54,130
We can get a form like this only and this is another one.

51
00:03:54,520 --> 00:03:56,470
Integris example select.

52
00:03:56,590 --> 00:04:00,410
So the Senate select option with the dropdown river.

53
00:04:00,730 --> 00:04:02,110
So this is a text area.

54
00:04:03,400 --> 00:04:10,490
And this is a form with an input type is able to file so you can see it as an input type file.

55
00:04:10,840 --> 00:04:17,620
So I'm telling you all this because this will make you have tool with how what kind of widgets we have

56
00:04:17,840 --> 00:04:18,720
with the form.

57
00:04:19,090 --> 00:04:24,610
Then this is all about sizing and this is what this is select.

58
00:04:24,970 --> 00:04:32,810
And this is only you can read this only note a little out here, then read only plaintext.

59
00:04:33,160 --> 00:04:34,360
So this is how we do.

60
00:04:34,710 --> 00:04:37,840
So this is one of the range inputs.

61
00:04:38,950 --> 00:04:47,050
This is the than a bit of slider behavior than others are checkbox and this is same checkbox then default

62
00:04:47,050 --> 00:04:50,790
Radil second radio, disable radio and line.

63
00:04:51,010 --> 00:04:55,150
So we are very much decent amount of parameters to work with.

64
00:04:55,510 --> 00:04:58,110
And then this is the bomb group.

65
00:04:58,630 --> 00:05:06,940
So this phone grid with foam roll and I'll explain all this, how you can make a phone bill and we'll

66
00:05:06,940 --> 00:05:08,380
start this from scratch.

67
00:05:08,750 --> 00:05:11,560
But this is what is going to be one of the important parts.

68
00:05:12,900 --> 00:05:16,040
And let's get started with designing our front end part.

69
00:05:16,350 --> 00:05:26,950
So I'll do what I do and just simply pick any template and help this because I have to extend my next

70
00:05:26,990 --> 00:05:28,600
shot to my home page.

71
00:05:28,900 --> 00:05:32,810
So I'll change the name my phone.

72
00:05:33,370 --> 00:05:36,640
OK, now, OK, I remove this line.

73
00:05:37,580 --> 00:05:45,930
OK, I'll give it a heading, Tetuan, let me go on heading my own.

74
00:05:47,830 --> 00:05:56,140
And what I'm going to do, I'm going to go to my local office and type slash my phone.

75
00:05:57,860 --> 00:06:04,190
OK, so this looks this is my phone, so I have to find the heading to make sure that the template is

76
00:06:04,190 --> 00:06:04,660
working.

77
00:06:05,120 --> 00:06:07,010
So what I can do next is.

78
00:06:08,940 --> 00:06:15,390
And move to this page and what you can do, you can have a simple layout.

79
00:06:17,080 --> 00:06:18,000
OK.

80
00:06:19,370 --> 00:06:20,690
You can have any of the same.

81
00:06:21,350 --> 00:06:23,510
Let's get let's start with a simple one.

82
00:06:24,800 --> 00:06:25,460
So.

83
00:06:26,820 --> 00:06:33,390
We'll pick this, OK, or if you want me to, I will make this from scratch, OK?

84
00:06:33,810 --> 00:06:38,780
US what you need to define, you need to define a form group so will define a foreign group.

85
00:06:39,690 --> 00:06:46,660
So for first, we will define the last physical container fluid.

86
00:06:47,640 --> 00:06:49,110
OK, this is a container.

87
00:06:49,320 --> 00:06:52,680
Then inside this, we need to do fine as a rule.

88
00:06:54,660 --> 00:06:56,220
Then I'll find a column.

89
00:07:00,450 --> 00:07:06,910
Go medium size six, or you can say Wizzit, then I need to define a phone.

90
00:07:08,570 --> 00:07:10,240
OK, so this will be defined.

91
00:07:10,620 --> 00:07:14,910
Now, what do you need to define inside of you need to define a class as a form group.

92
00:07:15,090 --> 00:07:21,740
So I use this div class is able to form in group.

93
00:07:25,730 --> 00:07:27,500
OK, so what do you need?

94
00:07:27,800 --> 00:07:35,540
So I'll use another OK, I'll let proceed with this so you can see that for two inputs.

95
00:07:35,540 --> 00:07:41,990
There are one live classes with one group and another is also the phone group to suppose you are having

96
00:07:41,990 --> 00:07:42,770
to inputs.

97
00:07:44,760 --> 00:07:58,830
The glass is a of full group, so you can see the container then a roll call column of of medium with

98
00:07:58,830 --> 00:08:02,910
six, then a foam, then I have to form that.

99
00:08:02,970 --> 00:08:04,830
This means I'm going to define two inputs.

100
00:08:05,400 --> 00:08:09,480
So one is input type is a lot of text.

101
00:08:10,780 --> 00:08:11,980
I'll give this idea.

102
00:08:12,120 --> 00:08:22,470
My text and name is all to my ex-husband and I'll define what you can see.

103
00:08:23,860 --> 00:08:28,620
They have defined input type image email classes to form control.

104
00:08:29,070 --> 00:08:34,320
So I'll define this class to this because this class is necessary.

105
00:08:37,070 --> 00:08:39,420
All control.

106
00:08:41,940 --> 00:08:52,440
OK, so this looks pretty fine, and I define a label label for my phone.

107
00:08:53,300 --> 00:08:56,960
So here you can see they are most defined label label for.

108
00:08:57,200 --> 00:09:00,380
So define a label my next.

109
00:09:05,140 --> 00:09:11,500
My text, this was fine and what we can do, I'll go to this page.

110
00:09:13,430 --> 00:09:14,870
OK, so here it is, a bomb.

111
00:09:15,110 --> 00:09:17,900
So but right now, there's no such an indictment.

112
00:09:17,930 --> 00:09:19,100
I'll go to inspect.

113
00:09:20,140 --> 00:09:26,800
OK, when I moved to inspect, I go to the closet, correct mistakes, and I cry in some cases out here,

114
00:09:27,190 --> 00:09:32,260
so I do margin zero or two.

115
00:09:32,470 --> 00:09:35,090
So this was my phone to the center.

116
00:09:35,950 --> 00:09:37,180
OK, I'll do this.

117
00:09:40,570 --> 00:09:46,660
Style is little margin, zero auto and with the same and do.

118
00:09:47,690 --> 00:09:51,590
With the heading as well, so I'll try the thesis on this as well.

119
00:09:52,010 --> 00:09:54,530
This is my heading, so let's do something next.

120
00:09:54,560 --> 00:09:56,300
A line is will the center get this?

121
00:09:56,300 --> 00:10:00,460
Looks pretty fine and I'll give a little bit of margin.

122
00:10:00,810 --> 00:10:04,130
Sorry, I'll get margin top.

123
00:10:06,490 --> 00:10:14,050
And I lose a relative unit, and this is in terms of RAM, so you can simply either you can copy the

124
00:10:14,050 --> 00:10:14,800
CCIS.

125
00:10:16,230 --> 00:10:23,990
And this is a key shortcut, you can walk with this, I'll put a style tag here and I'll paint the cases

126
00:10:24,000 --> 00:10:24,310
here.

127
00:10:24,480 --> 00:10:25,650
So this looks pretty fine.

128
00:10:26,040 --> 00:10:28,070
So am I.

129
00:10:28,350 --> 00:10:28,610
Right?

130
00:10:28,620 --> 00:10:31,110
Click here and I say form a document.

131
00:10:32,060 --> 00:10:33,320
OK, just the.

132
00:10:34,700 --> 00:10:42,350
Form a document for this is this isn't working, I'll check if something's OK, and I have defined the

133
00:10:42,350 --> 00:10:45,980
heading and I'll do some changes.

134
00:10:46,010 --> 00:10:50,270
OK, I'm having some issue with this one all this time, right?

135
00:10:50,810 --> 00:10:51,310
Yes.

136
00:10:51,650 --> 00:10:52,790
So I have a heading.

137
00:10:54,670 --> 00:10:56,510
OK, now this looks pretty fine.

138
00:10:56,780 --> 00:11:02,900
And you can see I have a phone with my text and I'll do the same.

139
00:11:03,920 --> 00:11:06,520
OK, I'll copy this quickly.

140
00:11:08,880 --> 00:11:12,550
OK, well, I will define as a text area.

141
00:11:13,260 --> 00:11:14,890
So this is the text area.

142
00:11:14,910 --> 00:11:22,020
So what we can do so this is the text area and we have defined rules for for how much rules we want.

143
00:11:22,320 --> 00:11:23,550
So we will quickly do this.

144
00:11:24,180 --> 00:11:25,680
OK, let's do this.

145
00:11:26,010 --> 00:11:32,900
Text area class is a form control control.

146
00:11:34,500 --> 00:11:37,760
OK, rules is equal to three.

147
00:11:38,730 --> 00:11:41,610
OK, before this I'll give an idea to it.

148
00:11:41,890 --> 00:11:53,550
I'm sorry it my text area as well as a name to it name is equal to.

149
00:11:58,280 --> 00:12:01,710
I'll give this a name as my text area.

150
00:12:02,940 --> 00:12:11,220
Look at this, looks pretty fine, and I'll close this text area so it automatically closes it and I'll

151
00:12:11,230 --> 00:12:15,060
define a label for.

152
00:12:16,060 --> 00:12:23,830
My next area on this was going to be my next.

153
00:12:27,670 --> 00:12:35,170
OK, I'll use the capital M on capital, so this looks pretty fine and when I move to my page.

154
00:12:37,290 --> 00:12:43,380
OK, this looks pretty fine, so this is a form we are made and will now test the responsiveness of

155
00:12:43,380 --> 00:12:43,880
this film.

156
00:12:44,100 --> 00:12:45,120
So what are going to do?

157
00:12:45,120 --> 00:12:51,760
We are going to press controlled shift or you can simply press, inspect, right.

158
00:12:51,760 --> 00:12:52,510
Click, inspect.

159
00:12:52,830 --> 00:12:54,280
Then we use a layout.

160
00:12:54,300 --> 00:12:54,670
OK.

161
00:12:54,710 --> 00:12:56,300
Now you can see the beauty of bootstrap.

162
00:12:56,610 --> 00:13:05,530
So you can see iPhone five or responsive form is the here iPhone six, iPad Galaxy S5.

163
00:13:05,790 --> 00:13:07,990
So this is a response of nature of a phone.

164
00:13:08,340 --> 00:13:14,040
So and this is you can see pixel two and here you can see that the cell phone being responsive.

165
00:13:14,070 --> 00:13:17,000
So this is a beautiful mousetrap.

166
00:13:17,220 --> 00:13:18,230
So thank you, guys.

167
00:13:18,240 --> 00:13:18,930
Thank you so much.

168
00:13:18,930 --> 00:13:20,730
So I'll catch up in the next to do.

169
00:13:20,970 --> 00:13:25,970
We will integrate this part of our form with the back and got back in part.

170
00:13:25,980 --> 00:13:26,740
So thank you, guys.