1
00:00:07,230 --> 00:00:10,260
Let's continue with the forms.

2
00:00:11,370 --> 00:00:16,710
Since forms are really important concept when it comes to web development.

3
00:00:16,710 --> 00:00:19,980
That is why we are spending some time on it.

4
00:00:20,490 --> 00:00:28,860
In the previous video we spoke about form attributes, but in this video we are going to talk about

5
00:00:28,890 --> 00:00:37,650
impute types, even though why we were discussing about the form attributes, we spoke about some of

6
00:00:37,650 --> 00:00:39,350
the input types.

7
00:00:39,360 --> 00:00:45,210
So in this video we're going to be optional because we spoke about it in the previous video, but let's

8
00:00:45,210 --> 00:00:48,450
go ahead and add more things into it.

9
00:00:48,630 --> 00:00:55,140
So back to Visual Studio Code, and this is where we left core form attributes.

10
00:00:55,410 --> 00:00:59,910
And before we continue, what are the input types?

11
00:00:59,910 --> 00:01:09,180
Like I've explained before, the input types allow the client or the user to submit a specific data

12
00:01:09,180 --> 00:01:14,430
that we need as a developer or as the owner of the application.

13
00:01:14,520 --> 00:01:18,240
Let's say we want the user to upload files.

14
00:01:18,240 --> 00:01:27,810
We need to specify the type of input or we want the user to submit a single answer whether it is true

15
00:01:27,810 --> 00:01:30,420
or false, that is a boolean answer.

16
00:01:30,450 --> 00:01:33,980
This is where input types comes into play.

17
00:01:33,990 --> 00:01:39,090
And for this one again, we have spoke about it in the form attribute.

18
00:01:39,090 --> 00:01:46,700
As you can see, we have different types of input type like number or text.

19
00:01:46,710 --> 00:01:48,810
So let's go over again.

20
00:01:48,810 --> 00:01:57,990
Because of that, I'm going to create a new file for it as input types and I'm going to use this scaffolding

21
00:01:57,990 --> 00:02:03,030
from MIT and I'll call this one as input types.

22
00:02:05,010 --> 00:02:05,910
All right.

23
00:02:05,910 --> 00:02:18,450
So let me add the each one as input types and let me underline it and open inside the browser.

24
00:02:18,700 --> 00:02:24,600
Q So what are the types of input that we have?

25
00:02:24,750 --> 00:02:29,400
One is we have input type of text.

26
00:02:29,400 --> 00:02:31,440
So here you go.

27
00:02:31,470 --> 00:02:37,470
Let me add the comment as types of input types.

28
00:02:38,430 --> 00:02:38,850
All right.

29
00:02:38,850 --> 00:02:41,670
So I'm going to put everything inside.

30
00:02:41,670 --> 00:02:44,970
Dave So now to be on top of each other.

31
00:02:45,000 --> 00:02:53,580
So the first one, I'm going to use a label and let me remove the four attribute here and it's going

32
00:02:53,580 --> 00:02:58,890
to be as text and the input goes like this.

33
00:02:59,040 --> 00:03:02,250
As you can see by default it is text.

34
00:03:02,340 --> 00:03:10,320
So when I save this one, as you can see, we have text in and you can provide additional attribute

35
00:03:10,320 --> 00:03:11,460
as well.

36
00:03:11,610 --> 00:03:15,390
So this one is for text attributes.

37
00:03:15,390 --> 00:03:19,170
So let me change the color to something like this.

38
00:03:19,470 --> 00:03:22,590
And let me copy this and paste that.

39
00:03:22,830 --> 00:03:34,290
The next type is going to be password as that and change this one to password and the type here as password.

40
00:03:34,320 --> 00:03:36,810
The name is even descriptive.

41
00:03:36,990 --> 00:03:43,530
As you can see, when I type, I have something like this instead of the rare text.

42
00:03:43,680 --> 00:03:50,080
Let me add some spacing by using the break type as that.

43
00:03:50,100 --> 00:03:53,450
The next type is going to be checkbox.

44
00:03:53,460 --> 00:03:55,500
So I'm going to copy this.

45
00:03:56,400 --> 00:04:01,260
Paste it here and change this one to checkbox.

46
00:04:02,300 --> 00:04:05,180
So what is the checkbox?

47
00:04:05,180 --> 00:04:11,690
This one creates a checkbox that allow a user to toggle on and off.

48
00:04:11,690 --> 00:04:13,460
So let's save it and let's see.

49
00:04:13,460 --> 00:04:16,010
As you can see, we have it as that.

50
00:04:16,010 --> 00:04:22,160
And we often use one for a user to agree to some terms and conditions in our application.

51
00:04:22,160 --> 00:04:26,800
Or if we are collecting some survey, we can see that are you married?

52
00:04:26,810 --> 00:04:32,690
If you check it, it means that you are married and if you don't, it means that you are not meaning

53
00:04:32,690 --> 00:04:33,380
force.

54
00:04:33,380 --> 00:04:36,590
So this is what you call a boolean value.

55
00:04:36,890 --> 00:04:43,070
The next type is going to be a radio button or a radio input type.

56
00:04:43,070 --> 00:04:48,410
So I will paste it here and change this one to radio.

57
00:04:48,650 --> 00:04:51,530
Let's save it and let's have a look.

58
00:04:51,560 --> 00:04:59,690
As you can see for the radio, I cannot do the toggling by checking and on checking, but for checkbox

59
00:04:59,690 --> 00:05:03,650
we can toggle the response as that.

60
00:05:03,980 --> 00:05:05,960
So my mistake.

61
00:05:05,960 --> 00:05:12,320
I need to put this one inside a form or the input type.

62
00:05:12,320 --> 00:05:15,140
It must be inside a form.

63
00:05:16,410 --> 00:05:18,510
Has that great.

64
00:05:18,540 --> 00:05:22,350
The next input type is called submit.

65
00:05:22,680 --> 00:05:24,960
So I'm going to copy this.

66
00:05:25,700 --> 00:05:30,530
And paste it here and change this one to submit.

67
00:05:32,490 --> 00:05:35,370
So what is the purpose for the submit?

68
00:05:35,400 --> 00:05:42,810
Well, this allows us to submit a data that we are filling in a form to a server.

69
00:05:42,960 --> 00:05:46,440
When I do that, as you can see, we have submit here.

70
00:05:46,440 --> 00:05:49,680
When I click on that, the value I'll pass in here.

71
00:05:49,680 --> 00:05:55,530
For example, this ones will be sent to the server for further processing.

72
00:05:55,560 --> 00:05:57,850
That is a submit for you.

73
00:05:57,870 --> 00:06:07,500
And instead of the input we can use the button also to get it done as button here and I will say submit.

74
00:06:08,460 --> 00:06:16,170
We can use the button to delete a record or data, or we can use a button to submit data to your server.

75
00:06:16,410 --> 00:06:21,450
So we are going to use a type attribute here and provide these values.

76
00:06:21,450 --> 00:06:28,740
If you use button, going to be this by default, but if I submit this one is the same as the input

77
00:06:28,740 --> 00:06:33,370
type of submit, save it and let's have a look.

78
00:06:33,390 --> 00:06:39,150
As you can see, it looks the same as the input of type submit.

79
00:06:39,570 --> 00:06:45,520
And we can also pass in additional value to the type called reset.

80
00:06:45,540 --> 00:06:49,110
So we're going to change this one to reset.

81
00:06:49,110 --> 00:06:52,020
And I will say reset.

82
00:06:52,200 --> 00:06:56,790
And I believe you have seen this kind of feature in some application.

83
00:06:56,790 --> 00:07:02,310
For example, if you are filling a four, you're going to see a button called reset.

84
00:07:02,310 --> 00:07:09,810
So when a user click on the reset is going to remove the data the user has typed in into the input field.

85
00:07:10,560 --> 00:07:13,350
Let's save it and let's have a look.

86
00:07:13,380 --> 00:07:16,320
As you can see, we have the reset.

87
00:07:16,410 --> 00:07:18,720
If I type anything here.

88
00:07:19,540 --> 00:07:21,590
And I click on Reset.

89
00:07:21,610 --> 00:07:24,730
As you can see, all the data is gone.

90
00:07:24,760 --> 00:07:27,520
That's a beauty for reset.

91
00:07:27,850 --> 00:07:35,200
The next input type is going to be a number, and for this one we have spoke about it.

92
00:07:35,200 --> 00:07:38,860
But let me bring it back or let me do it again.

93
00:07:39,100 --> 00:07:45,340
And this one is going to be of type number.

94
00:07:45,340 --> 00:07:51,140
So this one allows the user to enter a value, which is a number.

95
00:07:51,160 --> 00:07:56,200
As you can see, I can type number only and I can do the reset.

96
00:07:56,470 --> 00:08:01,090
Let me add some line break as that.

97
00:08:01,090 --> 00:08:07,240
Likewise, this one also here multiple times to have more line breaks.

98
00:08:08,060 --> 00:08:10,280
So let's see.

99
00:08:10,280 --> 00:08:14,150
Well, let me also add some lime bricks here.

100
00:08:15,800 --> 00:08:16,550
Let's see.

101
00:08:17,240 --> 00:08:18,430
I think is too much.

102
00:08:18,440 --> 00:08:19,820
Let me use only one.

103
00:08:20,590 --> 00:08:21,430
All right, cool.

104
00:08:21,670 --> 00:08:26,320
The next hype is going to be what is called a file.

105
00:08:26,470 --> 00:08:35,440
And where a file is going to help us to upload whether image or video or any file to a server for further

106
00:08:35,440 --> 00:08:36,400
processing.

107
00:08:36,429 --> 00:08:41,600
So I'm going to change this one to input type of file.

108
00:08:41,620 --> 00:08:42,940
So let's see.

109
00:08:43,210 --> 00:08:44,770
Let's refresh it.

110
00:08:44,920 --> 00:08:50,440
And over here I can select a file to upload.

111
00:08:51,040 --> 00:08:56,080
And let me add the line break here to line breaks.

112
00:08:56,530 --> 00:08:58,270
I think you let me see.

113
00:08:59,520 --> 00:09:01,420
No is too much.

114
00:09:01,440 --> 00:09:04,350
The line breaks, I think.

115
00:09:04,350 --> 00:09:05,520
Where is the number?

116
00:09:05,520 --> 00:09:09,240
I need to put line break here also to have some spacing.

117
00:09:09,480 --> 00:09:10,260
All right.

118
00:09:10,740 --> 00:09:12,800
And the submit?

119
00:09:12,810 --> 00:09:14,550
Yeah, I think it's okay.

120
00:09:14,550 --> 00:09:16,220
Don't worry for the styling.

121
00:09:16,230 --> 00:09:18,900
What we want is the actual logic.

122
00:09:18,900 --> 00:09:22,200
So this one is submit.

123
00:09:25,420 --> 00:09:27,280
And reset.

124
00:09:28,620 --> 00:09:31,560
Q So let me copy one of these.

125
00:09:32,670 --> 00:09:35,280
And the next type.

126
00:09:36,670 --> 00:09:39,220
Is going to be hidden.

127
00:09:40,830 --> 00:09:43,010
Think I'm messing up with a comment.

128
00:09:43,020 --> 00:09:44,910
Supposed to be on this one?

129
00:09:45,090 --> 00:09:45,830
Yeah.

130
00:09:45,840 --> 00:09:53,430
The next one going to be hidden, as the name implies, is going to hide this impute feud.

131
00:09:53,460 --> 00:09:54,360
Let's see.

132
00:09:55,360 --> 00:09:56,980
Okay, let's refresh it.

133
00:09:56,980 --> 00:10:06,280
For some reasons, we don't see the hidden or it's supposed to be in hidden like this typing mistake.

134
00:10:08,500 --> 00:10:10,090
Likewise this.

135
00:10:11,830 --> 00:10:15,040
As you can see, the input field is gone.

136
00:10:15,040 --> 00:10:17,070
And what are the use cases?

137
00:10:17,080 --> 00:10:25,060
Well, we often use this one to dynamically or conditionally display the input field.

138
00:10:25,240 --> 00:10:30,280
Let's say that we want a user to apply for a certain job position.

139
00:10:30,370 --> 00:10:39,070
And if your age is less than, let's say, 20 or ten years, then we can go ahead and hide some fields

140
00:10:39,070 --> 00:10:40,000
from you.

141
00:10:40,030 --> 00:10:44,170
So this one, we often use it based on some conditions.

142
00:10:44,290 --> 00:10:44,760
All right.

143
00:10:44,770 --> 00:10:46,690
That is a heading for you.

144
00:10:46,720 --> 00:10:52,540
The next type is going to be color, as we have spoken about it before.

145
00:10:52,720 --> 00:11:01,390
As the name implies, it's going to allow us to select a color that is a color picker as we spoke about

146
00:11:01,390 --> 00:11:04,030
it before in the previous video.

147
00:11:04,150 --> 00:11:10,780
The next is going to be data input field and this one's going to help us to select date.

148
00:11:10,990 --> 00:11:18,280
And as you can see, we have date with day, month and year.

149
00:11:18,550 --> 00:11:23,040
And we also have what is called date time looker.

150
00:11:23,050 --> 00:11:28,300
And this one is going to create date and time picker input.

151
00:11:28,330 --> 00:11:32,590
For this one, we can only select a date without a time.

152
00:11:32,590 --> 00:11:43,710
But if you want to incorporate time, then we are going to use date time looker as date time dash looker.

153
00:11:43,870 --> 00:11:46,330
With this, Let's have a look.

154
00:11:47,270 --> 00:11:48,440
Let's refresh it.

155
00:11:48,440 --> 00:11:56,810
And as you can see, we have the date and then the time that we can also select.

156
00:11:57,230 --> 00:11:58,340
Perfect.

157
00:11:58,520 --> 00:12:05,430
And we can also specify month if you want the user to select holy month.

158
00:12:05,450 --> 00:12:07,070
We can do that.

159
00:12:08,270 --> 00:12:10,430
Change this one to you Month.

160
00:12:10,760 --> 00:12:13,040
Save it and let's see.

161
00:12:13,400 --> 00:12:17,660
As you can see, the user can only select a month.

162
00:12:17,930 --> 00:12:25,360
And if you want the user to submit only email, we can also do that.

163
00:12:25,400 --> 00:12:29,510
So here the type as email.

164
00:12:29,900 --> 00:12:37,340
And as you can see for this one is going to accept only email fails.

165
00:12:38,240 --> 00:12:39,220
All right.

166
00:12:39,230 --> 00:12:42,980
Let me add some lime breaks as that.

167
00:12:43,100 --> 00:12:45,410
And then the month also.

168
00:12:46,150 --> 00:12:46,990
Line break.

169
00:12:48,630 --> 00:12:49,260
Good.

170
00:12:49,380 --> 00:12:52,020
I think the libraries are too much.

171
00:12:52,200 --> 00:12:52,650
It's okay.

172
00:12:52,680 --> 00:12:53,340
Don't worry about it.

173
00:12:53,460 --> 00:12:54,660
Yes, part of it.

174
00:12:54,930 --> 00:12:59,370
The next type of input is going to be range.

175
00:12:59,520 --> 00:13:04,620
So let me paste it here and change this one to range.

176
00:13:04,650 --> 00:13:09,270
The range is going to create input field for numbers.

177
00:13:09,270 --> 00:13:16,560
So when I save this one, as you can see, I can select any number based on the range.

178
00:13:16,590 --> 00:13:25,410
If you connect H.M. to JavaScript, be able to know or see the number at particular point on the range.

179
00:13:25,680 --> 00:13:27,600
The next is search.

180
00:13:27,810 --> 00:13:34,110
And I'm going to copy this and paste it here and change this one to search.

181
00:13:35,360 --> 00:13:38,990
And we often use this one to search a record.

182
00:13:38,990 --> 00:13:46,730
So for this one, when I type something, as you can see, we have the icon here that we can reset the

183
00:13:46,730 --> 00:13:51,590
search that we want to perform, and we also have time.

184
00:13:51,590 --> 00:13:53,750
So I'm going to copy this.

185
00:13:54,650 --> 00:13:58,250
And change this one to time.

186
00:13:58,760 --> 00:14:03,710
And as the name implies, I'm going to have to select a time.

187
00:14:03,980 --> 00:14:04,770
All right.

188
00:14:04,790 --> 00:14:09,980
And weeks also, we can select days of the week.

189
00:14:09,980 --> 00:14:12,920
And here, change this one to week.

190
00:14:13,130 --> 00:14:14,060
Save it.

191
00:14:14,060 --> 00:14:15,500
And let's see.

192
00:14:15,950 --> 00:14:20,930
And here, as you can see, I can select the days of the week.

193
00:14:20,930 --> 00:14:23,480
So this week, right.

194
00:14:24,220 --> 00:14:32,310
So that is it for most of the input types and we are going to use about 90 of these.

195
00:14:32,320 --> 00:14:35,420
So as we move on, you're going to put them into practice.

196
00:14:35,440 --> 00:14:35,860
All right.

197
00:14:35,860 --> 00:14:37,530
Catch you up in the next video.