1
00:00:02,070 --> 00:00:05,920
Let's start by exploring the email input.

2
00:00:05,920 --> 00:00:08,950
For that, I'll add another input here.

3
00:00:08,950 --> 00:00:12,013
And now I'll set the type to email.

4
00:00:13,150 --> 00:00:16,040
And I'll also give that input a name

5
00:00:16,040 --> 00:00:18,220
so that when it is submitted,

6
00:00:18,220 --> 00:00:21,210
we got an identifier which we'll be able to use

7
00:00:21,210 --> 00:00:24,480
on the server to extract that submitted data.

8
00:00:24,480 --> 00:00:27,590
And I'll just set this equal to "user-email",

9
00:00:27,590 --> 00:00:30,163
though of course, that value is up to you.

10
00:00:31,040 --> 00:00:33,640
I'll also add an ID to that input

11
00:00:33,640 --> 00:00:35,320
and use "useremail" here,

12
00:00:35,320 --> 00:00:37,630
one word without the dash.

13
00:00:37,630 --> 00:00:39,990
So that we can also add a label

14
00:00:39,990 --> 00:00:42,940
to connect that label to that input,

15
00:00:42,940 --> 00:00:46,090
to describe what should be entered in this input,

16
00:00:46,090 --> 00:00:50,030
because otherwise the input is not that self-explanatory.

17
00:00:50,030 --> 00:00:53,457
And here I'll just say "Your email address".

18
00:00:54,960 --> 00:00:56,200
Now on that label,

19
00:00:56,200 --> 00:00:58,300
I'll then add the "for" attribute

20
00:00:58,300 --> 00:01:02,030
to connect it to user email, so to this input.

21
00:01:02,030 --> 00:01:04,860
And now we've got this input here as well,

22
00:01:04,860 --> 00:01:07,620
and it looks exactly the same as the first input,

23
00:01:07,620 --> 00:01:10,800
but an important difference here indeed,

24
00:01:10,800 --> 00:01:14,240
is that now if we would visit this page

25
00:01:14,240 --> 00:01:18,260
with a mobile device and we would tap into this input field,

26
00:01:18,260 --> 00:01:21,630
a special kind of keyboard would be opened up there

27
00:01:21,630 --> 00:01:25,130
so that we have an easier time entering an email address.

28
00:01:25,130 --> 00:01:30,023
For example, by having easier access to the "@" symbol.

29
00:01:31,210 --> 00:01:34,220
In addition to this special keyboard being used,

30
00:01:34,220 --> 00:01:37,350
we also get some built in validation.

31
00:01:37,350 --> 00:01:41,210
Watch what happens if I enter just "Max" in there,

32
00:01:41,210 --> 00:01:44,420
which clearly is not an email address.

33
00:01:44,420 --> 00:01:47,920
If I now click submit, it's not submitted.

34
00:01:47,920 --> 00:01:51,540
Instead I get this error message, this warning,

35
00:01:51,540 --> 00:01:54,630
by the browser automatically.

36
00:01:54,630 --> 00:01:58,750
The browser tells me that this is not a valid email address,

37
00:01:58,750 --> 00:02:01,853
and we get this because this is set to type email.

38
00:02:02,770 --> 00:02:06,450
Now we are able to submit an empty field at the moment,

39
00:02:06,450 --> 00:02:08,720
but we're going to come back to validation

40
00:02:08,720 --> 00:02:12,060
in a couple of minutes later in this lecture.

41
00:02:12,060 --> 00:02:15,000
But we already got this first check here

42
00:02:15,000 --> 00:02:17,580
where the entered value is checked

43
00:02:17,580 --> 00:02:20,500
whether it is an email address or not.

44
00:02:20,500 --> 00:02:24,303
And that's this special type, the "email" type.

45
00:02:25,300 --> 00:02:28,250
Next, let's have a look at the number input.

46
00:02:28,250 --> 00:02:30,117
For this, I'll add another input

47
00:02:30,117 --> 00:02:33,230
where I set the type to "number".

48
00:02:33,230 --> 00:02:36,130
And this is an input which is optimized for,

49
00:02:36,130 --> 00:02:38,570
guess what, entering numbers.

50
00:02:38,570 --> 00:02:41,120
Let's say here, we want to get the user age.

51
00:02:41,120 --> 00:02:44,930
So I'll add a label where I say "Your age",

52
00:02:44,930 --> 00:02:49,930
and then here I'll point at an input field

53
00:02:50,140 --> 00:02:51,970
with an ID of "userage",

54
00:02:51,970 --> 00:02:54,690
which I'll therefore add as an ID here.

55
00:02:54,690 --> 00:02:57,280
And I'll also add the name.

56
00:02:57,280 --> 00:02:59,060
The order, by the way, doesn't matter,

57
00:02:59,060 --> 00:03:03,640
you can have ID first and then the name or vice versa.

58
00:03:03,640 --> 00:03:05,810
This absolutely does not matter.

59
00:03:05,810 --> 00:03:09,210
It never matters for any attributes.

60
00:03:09,210 --> 00:03:12,950
So you're all then set "user-age" as a name.

61
00:03:12,950 --> 00:03:14,610
So to have this identifier,

62
00:03:14,610 --> 00:03:16,790
which has submitted with the data.

63
00:03:16,790 --> 00:03:21,123
And ID "userage" without a dash to connect this label.

64
00:03:22,280 --> 00:03:25,390
If I saved this, this again, looks like a regular input,

65
00:03:25,390 --> 00:03:28,780
but note that I have these arrows here,

66
00:03:28,780 --> 00:03:31,800
which I get automatically by the browser

67
00:03:31,800 --> 00:03:34,370
because I used type "number" here.

68
00:03:34,370 --> 00:03:36,660
And they allow me to, well,

69
00:03:36,660 --> 00:03:39,853
change that number in increments here.

70
00:03:40,700 --> 00:03:44,090
Of course I can also adjust, enter number like this,

71
00:03:44,090 --> 00:03:46,730
but I can't type anything else.

72
00:03:46,730 --> 00:03:49,830
Here I'm trying to enter regular characters

73
00:03:49,830 --> 00:03:51,750
and you don't see anything on the screen

74
00:03:51,750 --> 00:03:54,270
because the browser blocks this.

75
00:03:54,270 --> 00:03:55,103
So here again,

76
00:03:55,103 --> 00:03:57,480
we got a slightly changed behavior

77
00:03:57,480 --> 00:04:00,350
because we're using a different type.

78
00:04:00,350 --> 00:04:04,980
And hence we forced the user to enter an expected value,

79
00:04:04,980 --> 00:04:07,240
which of course ultimately is what we want to do

80
00:04:07,240 --> 00:04:08,410
with our forms,

81
00:04:08,410 --> 00:04:11,040
because we want to ensure that we're fetching exactly

82
00:04:11,040 --> 00:04:12,483
the data which we need.

83
00:04:13,790 --> 00:04:16,850
Now with the type "number",

84
00:04:16,850 --> 00:04:19,980
you can also add a "step" attribute.

85
00:04:19,980 --> 00:04:22,770
You can add this to the email input as well,

86
00:04:22,770 --> 00:04:25,120
but there, it has no effect.

87
00:04:25,120 --> 00:04:27,620
But on the number input field,

88
00:04:27,620 --> 00:04:31,530
you can set a step which will affect these arrows

89
00:04:31,530 --> 00:04:35,970
and basically change how this number changes.

90
00:04:35,970 --> 00:04:37,640
The default here is one,

91
00:04:37,640 --> 00:04:42,190
so that clicking these arrows adds or deducts one.

92
00:04:42,190 --> 00:04:46,530
But you can also use 0.5, for example,

93
00:04:46,530 --> 00:04:50,240
to then change this value in 0.5 increments,

94
00:04:50,240 --> 00:04:51,670
as you can tell.

95
00:04:51,670 --> 00:04:56,093
Or you change it to 100 or whatever you want.

96
00:04:56,940 --> 00:04:58,580
Here, I'll leave it at one,

97
00:04:58,580 --> 00:05:01,140
which is the default and therefore could be omitted,

98
00:05:01,140 --> 00:05:03,760
but I'll leave it here for reference.

99
00:05:03,760 --> 00:05:06,760
And that's the number input field.

100
00:05:06,760 --> 00:05:09,720
And yes, we will also be able to control

101
00:05:09,720 --> 00:05:11,690
a minimum and maximum number,

102
00:05:11,690 --> 00:05:13,090
but I'll come back to that later

103
00:05:13,090 --> 00:05:15,633
when we take a closer look at validation.

104
00:05:16,710 --> 00:05:19,990
Now, let's have a look at the password input field.

105
00:05:19,990 --> 00:05:24,990
For this, I'll add another input of type "password"

106
00:05:25,450 --> 00:05:28,590
and just as before I'll add a label

107
00:05:28,590 --> 00:05:33,420
where I say "Your password" or whatever you want.

108
00:05:33,420 --> 00:05:36,970
And we'll connect us with the "for" attribute to,

109
00:05:36,970 --> 00:05:39,728
let's say, "userpassword".

110
00:05:39,728 --> 00:05:42,243
And then for on that input of type password,

111
00:05:42,243 --> 00:05:45,614
I'll set the name to "user-password",

112
00:05:45,614 --> 00:05:49,864
and set the ID equal to "userpassword" as one word.

113
00:05:53,940 --> 00:05:56,160
And I pressed the auto format short cut

114
00:05:56,160 --> 00:05:59,520
which is why all these self-closing forward slashes

115
00:05:59,520 --> 00:06:00,713
were added here.

116
00:06:01,950 --> 00:06:04,580
With that, now we got the password field.

117
00:06:04,580 --> 00:06:06,850
And the special thing here is that whatever I enter,

118
00:06:06,850 --> 00:06:10,250
you can't see it because it's hidden,

119
00:06:10,250 --> 00:06:11,900
which of course is a common feature

120
00:06:11,900 --> 00:06:14,113
we know from password fields.

121
00:06:16,030 --> 00:06:18,450
Let's continue with the date.

122
00:06:18,450 --> 00:06:21,530
For this, I'll add input of type "date".

123
00:06:21,530 --> 00:06:25,070
So we're still always working with the same input element,

124
00:06:25,070 --> 00:06:27,450
but the attribute, the "type" attribute,

125
00:06:27,450 --> 00:06:30,003
controls which kind of input we expect.

126
00:06:30,890 --> 00:06:35,890
So here we could request the birth date, for example,

127
00:06:37,520 --> 00:06:40,190
and then render this input of type "date".

128
00:06:40,190 --> 00:06:43,233
Give it an ID of "birthdate"

129
00:06:44,606 --> 00:06:48,950
and a name of "user-birthdate", for example,

130
00:06:48,950 --> 00:06:50,090
and then on the label,

131
00:06:50,090 --> 00:06:53,040
I'll then point at "birthdate" like this,

132
00:06:53,040 --> 00:06:54,853
to pick up that ID again.

133
00:06:56,280 --> 00:06:58,360
With that if we saved this,

134
00:06:58,360 --> 00:06:59,820
now we got this input here

135
00:06:59,820 --> 00:07:04,040
and you'll notice that it shows us this little helper,

136
00:07:04,040 --> 00:07:06,040
which we can even select.

137
00:07:06,040 --> 00:07:08,830
So where I can select the different segments

138
00:07:08,830 --> 00:07:13,680
to have an easier time entering my birth date.

139
00:07:13,680 --> 00:07:15,920
And that's not my birth date, by the way.

140
00:07:15,920 --> 00:07:17,400
So we can enter this year.

141
00:07:17,400 --> 00:07:21,270
It also should automatically be adjusted to your region.

142
00:07:21,270 --> 00:07:22,770
So if you're in the US,

143
00:07:22,770 --> 00:07:25,790
the format will probably look differently.

144
00:07:25,790 --> 00:07:29,070
And we also got this calendar button here,

145
00:07:29,070 --> 00:07:31,640
which we can click to open a date picker,

146
00:07:31,640 --> 00:07:35,550
which makes it easier to select dates.

147
00:07:35,550 --> 00:07:38,590
So now we've got this helpful utility here

148
00:07:38,590 --> 00:07:41,750
for this date input.

149
00:07:41,750 --> 00:07:43,230
And whilst we could of course,

150
00:07:43,230 --> 00:07:46,760
also fetch a date with a regular text input,

151
00:07:46,760 --> 00:07:50,420
I could enter some date here as well,

152
00:07:50,420 --> 00:07:52,420
we of course got more help

153
00:07:52,420 --> 00:07:56,380
and hence provide a better user experience to our visitors

154
00:07:56,380 --> 00:07:58,630
if we use that "date" type

155
00:07:58,630 --> 00:08:00,820
so that the user gets some hints

156
00:08:00,820 --> 00:08:02,570
about the expected format

157
00:08:02,570 --> 00:08:05,363
and gets that date picker as well.