1
00:00:07,370 --> 00:00:14,090
This is where we lived in the previous video by creating a simple HTML form.

2
00:00:14,420 --> 00:00:20,180
In this video we will talk about attributes of form inputs.

3
00:00:20,630 --> 00:00:29,660
And if you are new to forms, I advise you to take some notes as we proceed, because forms are really

4
00:00:29,660 --> 00:00:31,640
important concept.

5
00:00:31,970 --> 00:00:36,170
All right, so I'm going to duplicate this.

6
00:00:37,140 --> 00:00:44,520
And I'm going to rename this one to form a tribute as that.

7
00:00:44,820 --> 00:00:50,820
And let me close this and open this one instead as that.

8
00:00:50,850 --> 00:00:53,940
So let me change this one to.

9
00:00:55,470 --> 00:00:57,360
All right, So.

10
00:00:58,250 --> 00:01:01,100
The comment goes like this.

11
00:01:01,640 --> 00:01:02,150
All right.

12
00:01:02,150 --> 00:01:08,750
So as it stands right now, we have some problems, like I have explained before.

13
00:01:09,560 --> 00:01:15,920
If you want the user to submit some specific data, how are we going to do it?

14
00:01:16,400 --> 00:01:21,680
And we are going to use the first attribute called type.

15
00:01:22,410 --> 00:01:33,060
The type attribute, specify the type of input element whether you want the user to enter a number or

16
00:01:33,060 --> 00:01:35,520
password or text.

17
00:01:35,820 --> 00:01:41,610
So let me remove the button and then the edge input field.

18
00:01:41,610 --> 00:01:46,170
And let's start with the first input field.

19
00:01:46,830 --> 00:01:53,910
And for this, we are going to specify what is called the type attribute.

20
00:01:55,650 --> 00:02:05,820
So for the input we can pass in couple of attributes and one of the required attribute is called type.

21
00:02:06,500 --> 00:02:16,550
As you can see, when I make use of type, we have all these types, the color date, email and our

22
00:02:16,550 --> 00:02:19,460
explain most of these ones.

23
00:02:20,000 --> 00:02:27,680
If you want the user to submit a text, we are going to use a type of text.

24
00:02:28,580 --> 00:02:34,340
With this one, we are specifying that the user need to provide a text.

25
00:02:34,580 --> 00:02:41,940
So when I save it, nothing seems to be changed by behind doors or behind the scene.

26
00:02:41,960 --> 00:02:44,990
We have improved our form.

27
00:02:45,990 --> 00:02:55,830
The next attribute is called name and name is used as the key in the data sent to the server when the

28
00:02:55,830 --> 00:02:57,720
form is submitted.

29
00:02:58,490 --> 00:03:04,820
Well, if we connect our client side as a HTML to backend or server.

30
00:03:05,000 --> 00:03:13,130
And when you click on a button, the value that you pass into name is what is going to be sent to the

31
00:03:13,130 --> 00:03:13,820
server.

32
00:03:14,120 --> 00:03:19,520
So the name host the value that we are sending to the server.

33
00:03:19,940 --> 00:03:27,770
Because if you make a request, for example, if we submit our form, the back end is going to process

34
00:03:27,770 --> 00:03:28,940
our data.

35
00:03:29,390 --> 00:03:36,800
And for the back end to be able to know the kind of data that we are sending, the back end will look

36
00:03:36,800 --> 00:03:40,580
at the name attribute and the value that it hosts.

37
00:03:40,850 --> 00:03:50,900
So if you are familiar with back end development, we have access to the data as requested by DOT name.

38
00:03:51,290 --> 00:03:56,960
Don't worry, as you move on in this code as a back end development, you better understand what I'm

39
00:03:56,960 --> 00:03:57,770
referring to.

40
00:03:58,040 --> 00:04:05,480
For the meantime, understand that the name holds the value that we are sending to the server.

41
00:04:05,510 --> 00:04:09,050
So for the meantime, let's remove that.

42
00:04:09,440 --> 00:04:14,090
The next attribute is the name, as I have spoken about.

43
00:04:14,210 --> 00:04:20,540
So let me bring it here so that you can make reference to it in the future.

44
00:04:20,810 --> 00:04:23,030
So I'm going to copy this.

45
00:04:24,120 --> 00:04:28,320
And here as the name attribute.

46
00:04:28,980 --> 00:04:32,460
And for this one I would say password.

47
00:04:34,960 --> 00:04:45,280
And the type here is password and the name is equal to the password the user is sending to the server

48
00:04:45,280 --> 00:04:47,050
to be able to look in.

49
00:04:47,320 --> 00:04:52,480
So the name host the value for the password or the value.

50
00:04:52,900 --> 00:04:56,890
The next attribute is called the value attribute.

51
00:04:56,890 --> 00:04:59,020
So I'm going to copy this.

52
00:05:01,450 --> 00:05:07,660
And after the break, I would say the value attribute.

53
00:05:07,930 --> 00:05:10,660
So what is the value attribute?

54
00:05:10,930 --> 00:05:17,860
The value attribute specifies the initial value of the input element.

55
00:05:18,130 --> 00:05:19,210
Let me show you.

56
00:05:19,360 --> 00:05:24,760
For this I want to accept number.

57
00:05:25,400 --> 00:05:35,410
And I'm going to provide value and I'll provide value and I will say 200 when I save this one.

58
00:05:35,420 --> 00:05:36,470
Let's have a look.

59
00:05:36,500 --> 00:05:43,280
As you can see, it has provided initial value for my input field.

60
00:05:43,280 --> 00:05:47,540
And I believe you've seen search input before.

61
00:05:48,140 --> 00:05:48,650
All right.

62
00:05:48,650 --> 00:05:56,180
And with the type of number, as you can see for this, I cannot type in any text on my keyboard because

63
00:05:56,180 --> 00:06:02,890
I specify number as a type, meaning that I want the user to enter only number.

64
00:06:02,900 --> 00:06:05,870
So when I press any number now it works.

65
00:06:05,870 --> 00:06:09,560
When I refresh it, I have my initial value.

66
00:06:09,590 --> 00:06:13,070
That is it for the value attribute.

67
00:06:13,340 --> 00:06:19,790
The next attribute is called the check attribute for checkbox.

68
00:06:19,790 --> 00:06:22,040
So I'm going to copy this.

69
00:06:23,080 --> 00:06:25,120
And I will say.

70
00:06:26,590 --> 00:06:36,340
CheckBox attribute apart from the type, apart from the number and text and password, we have different

71
00:06:36,340 --> 00:06:48,520
type core checkbox and let me change this one to checkbox and let me remove this one when I save this

72
00:06:48,520 --> 00:06:48,980
one.

73
00:06:49,000 --> 00:06:56,320
As you can see now, I can check the next one is going to be the required.

74
00:06:56,410 --> 00:06:58,180
What is a required attribute?

75
00:06:58,180 --> 00:07:04,600
So let me copy this and paste it here and call this one as.

76
00:07:05,370 --> 00:07:06,810
Required attributes.

77
00:07:06,840 --> 00:07:10,140
Let me change the color for my comment as that.

78
00:07:10,500 --> 00:07:13,890
So I will say required.

79
00:07:14,160 --> 00:07:24,360
And let me explain to you the required attribute specify that the input must be filled before submitting.

80
00:07:24,390 --> 00:07:31,830
Meaning we are making this one as required for it, meaning that the user cannot submit the form unless

81
00:07:31,830 --> 00:07:36,930
the user provide the value for the data that we want user to submit.

82
00:07:37,290 --> 00:07:44,340
So when I say this one is number and when I provide required.

83
00:07:45,440 --> 00:07:46,510
Which is true.

84
00:07:46,520 --> 00:07:49,520
And when I saved this one.

85
00:07:49,520 --> 00:07:50,000
All right.

86
00:07:50,000 --> 00:07:56,510
When I have a burden, when I click on that with that providing this, I'm going to have some error,

87
00:07:56,510 --> 00:08:01,640
meaning that this input is required failed.

88
00:08:01,880 --> 00:08:04,150
That is it for the requires.

89
00:08:04,150 --> 00:08:10,820
So the required is used for validation and it is called client side validation.

90
00:08:10,820 --> 00:08:14,590
And we also have server side validation.

91
00:08:14,630 --> 00:08:20,540
As we move on, you better understand what is called the server side validation.

92
00:08:20,900 --> 00:08:28,790
The next attribute is going to be placeholder as a placeholder attribute.

93
00:08:28,790 --> 00:08:29,780
What does that mean?

94
00:08:29,780 --> 00:08:38,990
The placeholder attribute specify a shorthand that describes the expected value of an input field,

95
00:08:38,990 --> 00:08:43,120
meaning that it provide more information.

96
00:08:43,130 --> 00:08:45,890
How the user should submit the data.

97
00:08:45,890 --> 00:08:55,490
So if I remove the label here and when I save it and let's have a look, as you can see this input field,

98
00:08:55,490 --> 00:08:58,520
you don't know what it does, do you get it?

99
00:08:58,520 --> 00:09:07,310
So if you use Placeholder as a placeholder and you provide some information about this input field,

100
00:09:07,310 --> 00:09:10,850
I will say enter each.

101
00:09:11,750 --> 00:09:12,350
Right.

102
00:09:12,350 --> 00:09:18,710
So when I save this one, as you can see, we have the information being inside the placeholder.

103
00:09:18,950 --> 00:09:21,830
This value will not be sent to the server by.

104
00:09:21,830 --> 00:09:26,510
Instead, it gives more direction how the user should provide the data.

105
00:09:26,690 --> 00:09:29,890
When I type in number here, you can see that it is gone.

106
00:09:29,900 --> 00:09:39,980
Apart from the placeholder, we also have other attribute as minimum and maximum for number input.

107
00:09:40,130 --> 00:09:43,550
So let me put it here as.

108
00:09:44,420 --> 00:09:48,830
Minimum and maximum of number input.

109
00:09:48,860 --> 00:09:53,150
Let's say that we are developing a donation platform.

110
00:09:53,210 --> 00:09:56,180
We want users to make donation.

111
00:09:56,450 --> 00:10:06,020
And we can specify that we want minimum amount of $10 and maximum of $100.

112
00:10:06,440 --> 00:10:13,190
If we don't provide those minimum and maximum, a user can pay $1.

113
00:10:13,340 --> 00:10:13,910
Right.

114
00:10:13,910 --> 00:10:18,740
So it's also a way of putting in some validation.

115
00:10:19,100 --> 00:10:24,890
So let me remove the required here and when I make use of minimum.

116
00:10:25,960 --> 00:10:35,890
And I would say the minimum here is going to be $10 and maximum as $100.

117
00:10:36,010 --> 00:10:44,140
So I would say minimum and maximum as that.

118
00:10:44,200 --> 00:10:52,900
Or we can use H Let's say that we want a certain age for a certain application.

119
00:10:53,200 --> 00:11:00,840
And if your age is less than or more than 80 years, you cannot submit the form.

120
00:11:00,850 --> 00:11:05,200
So we can use the maximum and then the minimum.

121
00:11:05,530 --> 00:11:13,210
So for this, when I type in zero, as you can see, even though it worked, but when I click on submit,

122
00:11:13,210 --> 00:11:15,250
I'm going to receive an error.

123
00:11:15,280 --> 00:11:20,110
So that is the beauty of the minimum and maximum.

124
00:11:20,530 --> 00:11:26,490
And the next one is going to be the step attribute.

125
00:11:26,500 --> 00:11:37,270
So let me copy this and paste this here and change this one to step attribute as step.

126
00:11:38,240 --> 00:11:40,310
As the name implies.

127
00:11:40,490 --> 00:11:43,820
Let me show you so that you better understand.

128
00:11:45,250 --> 00:11:46,390
Uh, step.

129
00:11:47,570 --> 00:11:56,810
And it goes like this I'll provide type number and remove this one and say step of two.

130
00:11:57,080 --> 00:11:59,690
When I save this, let's have a look.

131
00:11:59,960 --> 00:12:09,020
When I click on this, I can see it start from two and then I'm expecting this one to move to three.

132
00:12:09,020 --> 00:12:10,900
But it moves to four.

133
00:12:10,910 --> 00:12:14,420
And as you can guess, six, eight, ten like that.

134
00:12:14,420 --> 00:12:17,300
Meaning we are moving two steps.

135
00:12:17,540 --> 00:12:26,030
If I change this 1 to 10, meaning it will start from ten and increase by ten as that.

136
00:12:26,640 --> 00:12:31,710
And you also have color attribute, and I'm going to be a type.

137
00:12:31,710 --> 00:12:34,350
So for the type we have different type.

138
00:12:34,350 --> 00:12:37,290
So let me say color.

139
00:12:37,290 --> 00:12:42,240
And here, if I change this one to color, we move this one.

140
00:12:42,540 --> 00:12:43,530
Let's see.

141
00:12:43,830 --> 00:12:46,470
As you can see, we have color.

142
00:12:46,650 --> 00:12:49,620
And I can also.

143
00:12:50,740 --> 00:12:54,280
Allow the user to submit date.

144
00:12:54,700 --> 00:13:05,860
So I will say date type change this one to type and this one is color type as that.

145
00:13:05,860 --> 00:13:09,040
And if I want date.

146
00:13:09,780 --> 00:13:11,010
Change this one to.

147
00:13:11,010 --> 00:13:15,090
Oh, I have the date here already as date and chain.

148
00:13:15,090 --> 00:13:16,950
This one to date.

149
00:13:17,820 --> 00:13:21,660
As you can see now, I can make use of date.

150
00:13:21,990 --> 00:13:33,870
And if I want a user to upload a file, here is going to be file type and the value here for the let

151
00:13:33,870 --> 00:13:35,040
me save file.

152
00:13:35,050 --> 00:13:38,700
The value for the type is going to be file.

153
00:13:39,150 --> 00:13:43,710
And as you can see, I can choose a file to be uploaded.

154
00:13:43,860 --> 00:13:48,000
And let me add the input.

155
00:13:48,390 --> 00:13:56,670
And here I can specify that button here and provide a value I submit.

156
00:13:58,030 --> 00:14:00,320
So this one behaves like a button.

157
00:14:00,340 --> 00:14:03,280
As you can see, I can click on that to submit.

158
00:14:03,550 --> 00:14:10,360
Well, before we can submit this data, unless we connect to a server or backend, but for the meantime,

159
00:14:10,360 --> 00:14:14,210
understand these basic and common attributes.

160
00:14:14,230 --> 00:14:16,150
All right, let's continue in the next video.