1
00:00:00,930 --> 00:00:06,100
So in this video we're going to go ahead and create a solution for this registration form.

2
00:00:06,640 --> 00:00:09,360
So I have a new file going to save it.

3
00:00:09,540 --> 00:00:17,910
I'm just going to call this registration form that HDMI I'll use my sublime shortcut

4
00:00:22,200 --> 00:00:25,220
and get our boiler boiler plate going.

5
00:00:26,370 --> 00:00:31,010
So when we're faced with a project like this there's quite a few places that we could start.

6
00:00:31,260 --> 00:00:39,120
And the first thing that I'm going to do is add the form Tagen and then I'm also going to add this H1

7
00:00:40,200 --> 00:00:41,160
just up top here

8
00:00:44,160 --> 00:00:47,940
and Louis put register.

9
00:00:48,060 --> 00:00:53,510
So let's go ahead and open our registration form here and move it over.

10
00:00:53,970 --> 00:00:59,580
Ok not quite there yet but at least or Each one is looking good.

11
00:01:00,060 --> 00:01:05,730
So let's go back to sublime and let's stick let's start with the simplest thing should be these this

12
00:01:05,730 --> 00:01:07,340
top level of inputs.

13
00:01:07,500 --> 00:01:11,670
The first name and last name.

14
00:01:11,670 --> 00:01:13,750
So we'll start with input.

15
00:01:14,400 --> 00:01:20,370
And those are type equals text ups.

16
00:01:22,900 --> 00:01:29,610
And let's give it a placeholder which looks like it should be John let's do another one placeholder

17
00:01:30,020 --> 00:01:35,640
Smith and then we need to give two labels.

18
00:01:36,120 --> 00:01:39,270
So we could use either syntax for labels.

19
00:01:39,270 --> 00:01:42,970
I'm going to use the four.

20
00:01:43,260 --> 00:01:48,950
So I'll call this first and we'll make sure we get an ID equal to first.

21
00:01:50,040 --> 00:01:57,180
And then this label will say first name colon which will give us that and then we need to do the exact

22
00:01:57,180 --> 00:01:59,020
same thing.

23
00:01:59,220 --> 00:02:12,750
Another label for the last one of say a last name colon and then we need to give this ID equals last

24
00:02:12,760 --> 00:02:14,300
.

25
00:02:15,810 --> 00:02:19,200
So let's check in and see what we have.

26
00:02:19,680 --> 00:02:21,820
So far so good.

27
00:02:21,960 --> 00:02:27,650
There is one small thing that we're missing which is we haven't given these inputs a name so just give

28
00:02:27,660 --> 00:02:35,540
it the name first and name the last great.

29
00:02:35,550 --> 00:02:37,950
So let's move on to the next chunk here.

30
00:02:38,090 --> 00:02:41,640
What we're actually missing one thing which is the validations.

31
00:02:41,640 --> 00:02:46,540
So while we're here remember that first name and last name are not supposed to be blank.

32
00:02:46,590 --> 00:02:54,000
So in order to do that it's very simple we just add the required attribute on the inputs required and

33
00:02:54,000 --> 00:02:56,160
set that to be true.

34
00:02:56,340 --> 00:03:00,690
So I'm going to go ahead and expand this just so that we can see a little bit clearer what we're working

35
00:03:00,690 --> 00:03:01,550
on.

36
00:03:02,190 --> 00:03:08,320
So the next thing if we consult the form here is the gender radio button.

37
00:03:08,580 --> 00:03:12,060
So we need to have three radio buttons.

38
00:03:12,210 --> 00:03:18,940
So those are input type equals radio.

39
00:03:19,470 --> 00:03:21,600
Three of them.

40
00:03:21,600 --> 00:03:27,750
And if we take a look with that gives us first thing you'll see is that they are in line with the other

41
00:03:27,750 --> 00:03:32,300
elements which is not actually what the form that I gave you is supposed to look like.

42
00:03:32,460 --> 00:03:36,870
So we have a few options to get things to behave.

43
00:03:36,870 --> 00:03:38,220
We can throw them in a paragraph

44
00:03:41,910 --> 00:03:46,620
like this just add some spacing.

45
00:03:46,680 --> 00:03:49,710
Now we get them on a separate line.

46
00:03:49,860 --> 00:03:52,840
I'm just going to use a div here.

47
00:03:54,330 --> 00:03:56,020
There you go into a div.

48
00:03:56,190 --> 00:03:57,940
Doesn't quite have the same spacing.

49
00:03:57,980 --> 00:04:03,600
A paragraph has in the C S S video will actually talk about what that spacing is.

50
00:04:03,960 --> 00:04:06,580
So now we need to go ahead and add or labels

51
00:04:09,240 --> 00:04:15,010
and before we do that let's actually start give them the same name so name will be gender here.

52
00:04:15,640 --> 00:04:24,660
Let's go ahead and should have used my shortcut here which is to command click multiple cursors so we

53
00:04:24,660 --> 00:04:31,080
get them naming cross-gender and then let's give them each a value.

54
00:04:31,290 --> 00:04:35,460
So the first one the value will be male.

55
00:04:35,460 --> 00:04:37,140
Second one will be female.

56
00:04:37,140 --> 00:04:40,860
The last one is either and refresh.

57
00:04:41,010 --> 00:04:44,390
We don't see any of that of course because that's just behind the scenes.

58
00:04:44,730 --> 00:04:47,210
So what we need to do is add in our labels.

59
00:04:47,580 --> 00:04:51,150
So we're going to want three labels.

60
00:04:51,150 --> 00:04:57,080
First one are going to say label four and we'll just call this male

61
00:05:02,090 --> 00:05:03,750
teated we have here.

62
00:05:03,900 --> 00:05:09,470
No Colon's so just mail and then Id equals mail.

63
00:05:09,940 --> 00:05:11,020
Same thing.

64
00:05:11,010 --> 00:05:13,590
Another label here.

65
00:05:13,600 --> 00:05:15,250
This one will be female.

66
00:05:15,730 --> 00:05:21,150
And then we're going to want to say Id me for you cause female.

67
00:05:21,490 --> 00:05:25,830
And then you go on to say ID you cause female.

68
00:05:25,840 --> 00:05:31,130
So as you can see building these forms it gets a little tedious sometimes.

69
00:05:31,140 --> 00:05:35,800
You have a bunch of labels and a lot of mess things you just have to be extra careful that you have

70
00:05:36,220 --> 00:05:38,940
everything corresponding correctly.

71
00:05:38,940 --> 00:05:47,500
So we want for other I mean we want to do ID equals either.

72
00:05:47,710 --> 00:05:50,500
So let's just check in on this see what we have.

73
00:05:50,620 --> 00:05:50,910
All right.

74
00:05:50,940 --> 00:05:51,980
That looks great.

75
00:05:52,000 --> 00:05:55,680
We can only select one which is what we want.

76
00:05:55,720 --> 00:06:01,860
Next thing we can move on to let's go ahead and add the submit button at the end just while we're here

77
00:06:01,880 --> 00:06:01,940
.

78
00:06:01,990 --> 00:06:06,480
So that's going to be input type equals submit.

79
00:06:07,600 --> 00:06:09,540
And let's just make sure validation works.

80
00:06:09,730 --> 00:06:13,810
Yes it does great in good shape.

81
00:06:15,250 --> 00:06:17,930
So next up we have an e-mail and a password field.

82
00:06:18,310 --> 00:06:20,230
And those are on new line as well.

83
00:06:20,230 --> 00:06:27,900
So let's go ahead and add another div and we're going to do an input and this time it's type equals

84
00:06:28,100 --> 00:06:28,640
e-mail.

85
00:06:28,660 --> 00:06:37,710
It's not just text and the placeholder here was your e-mail which is admittedly not the best placeholder

86
00:06:37,720 --> 00:06:42,400
text but we're going to stick to that image make sure we follow the assignment.

87
00:06:42,390 --> 00:06:47,950
So input type is e-mail placeholder is your email and then we have another one for password

88
00:06:51,850 --> 00:06:53,940
and that gives us two inputs.

89
00:06:54,310 --> 00:07:01,390
Next up we can either go with name so to just say name is email here member in case you're confused

90
00:07:01,410 --> 00:07:01,550
.

91
00:07:01,690 --> 00:07:09,270
That name is purely used behind the scenes to figure out how to send the data what should we send the

92
00:07:09,270 --> 00:07:12,480
data in the request under What's the name of it.

93
00:07:12,580 --> 00:07:16,520
So in this case whatever we type in this field is going to be called e-mail.

94
00:07:16,870 --> 00:07:19,300
So we don't see any impact just in case.

95
00:07:19,310 --> 00:07:24,200
I do think this is one of the more confusing parts because it's not very visual.

96
00:07:24,670 --> 00:07:30,750
So this one will say name was password and then let's go ahead and add or labels.

97
00:07:30,940 --> 00:07:40,210
So just to mix it up here I will use the other type of label which is where we nest the data inside

98
00:07:40,330 --> 00:07:41,390
the label itself.

99
00:07:41,560 --> 00:07:49,800
So will say e-mail colon rather than the four and Id syntax.

100
00:07:49,810 --> 00:07:56,520
They work the same way let's do email and password.

101
00:07:57,060 --> 00:07:58,490
Let's be very precise.

102
00:07:58,690 --> 00:08:00,360
There are colons on both of them.

103
00:08:00,370 --> 00:08:00,920
Great.

104
00:08:01,210 --> 00:08:10,090
But save that and there is one other thing that we should take a look at and see are validations are

105
00:08:10,090 --> 00:08:13,330
in place fill this in.

106
00:08:13,750 --> 00:08:15,130
No.

107
00:08:16,060 --> 00:08:20,670
So one thing that we're missing is we need to require the e-mail.

108
00:08:21,510 --> 00:08:30,170
So we need to go to our e-mail and add required now we refresh fill these out.

109
00:08:30,580 --> 00:08:35,000
We leave e-mail blank if we type in a non-valid e-mail.

110
00:08:35,010 --> 00:08:36,640
We get this error.

111
00:08:37,260 --> 00:08:39,350
Great.

112
00:08:39,510 --> 00:08:41,940
So so far everything looks good.

113
00:08:41,950 --> 00:08:47,670
We're going to come back to the bonus password validation at the end before we get there.

114
00:08:47,670 --> 00:08:50,780
Let's move on to the birthday select.

115
00:08:50,920 --> 00:08:53,140
So three dropdown menus.

116
00:08:53,500 --> 00:09:02,670
So again you can add another div and this time in this div we're going to add three different selects

117
00:09:02,670 --> 00:09:02,920
.

118
00:09:02,980 --> 00:09:06,920
So one two three.

119
00:09:07,240 --> 00:09:13,070
Let's start with this first one which is four month and let's go ahead and start with the label.

120
00:09:13,120 --> 00:09:15,620
There's only one label here for everything.

121
00:09:16,000 --> 00:09:24,300
So you know do it like this label and put all three subjects inside and this label was going to say

122
00:09:24,310 --> 00:09:31,330
a birthday and it's going to look like that.

123
00:09:31,330 --> 00:09:39,040
So if we see what we get we have our three inputs are three labels and all that we need to do is add

124
00:09:39,040 --> 00:09:41,450
in the correct data inside.

125
00:09:41,470 --> 00:09:44,380
So that's a bunch of options.

126
00:09:44,400 --> 00:09:49,230
So the first one let's go ahead and add I'm just going to do two or three here so this will be for months

127
00:09:49,240 --> 00:09:49,420
.

128
00:09:49,410 --> 00:09:53,950
So we'll do Jan and March.

129
00:09:55,760 --> 00:09:58,290
The next one do the same thing.

130
00:09:58,330 --> 00:10:02,240
Just a few options and this will be for day.

131
00:10:02,250 --> 00:10:03,240
So we'll start.

132
00:10:03,430 --> 00:10:07,430
Let's do double digits at 10 11 and 12.

133
00:10:07,620 --> 00:10:09,600
And the last one will be the year.

134
00:10:10,180 --> 00:10:17,640
Just do three again and let's do 1999 2000 2001.

135
00:10:19,060 --> 00:10:19,590
Great.

136
00:10:19,810 --> 00:10:22,310
And you can see we get our dropped down here.

137
00:10:22,330 --> 00:10:29,950
There is one small difference though which is that our start right away with January and numbers and

138
00:10:29,950 --> 00:10:31,220
the year.

139
00:10:31,690 --> 00:10:38,090
But the one that I gave you starts off with month day and year.

140
00:10:38,320 --> 00:10:40,150
So there's a few ways of doing that.

141
00:10:40,180 --> 00:10:46,570
The simplest one is just to make the very first option say month

142
00:10:49,650 --> 00:10:50,130
day

143
00:10:53,010 --> 00:11:00,980
and year and by doing that HDMI will the form just picks the very first option and it decides that the

144
00:11:00,980 --> 00:11:01,870
initial value.

145
00:11:02,080 --> 00:11:05,050
So that's the most common way of doing that.

146
00:11:05,350 --> 00:11:08,040
So now our firm looks pretty good.

147
00:11:08,050 --> 00:11:16,420
We just need our final I agree to terms and conditions checkbox so we can add yet another div here and

148
00:11:16,430 --> 00:11:17,320
then that's properly

149
00:11:20,150 --> 00:11:29,290
final div instead of this one we're going to let's start with the label this time let's do four and

150
00:11:29,330 --> 00:11:38,050
this one let's call it let's call it agreed.

151
00:11:38,370 --> 00:11:41,320
I agreed to the terms and conditions

152
00:11:44,290 --> 00:11:54,460
and then the next thing that we need is our input tape calls checkbox let's give it ID because I agreed

153
00:11:56,200 --> 00:12:00,310
and name and also agreed.

154
00:12:01,120 --> 00:12:05,970
And that's what we get looks good to me.

155
00:12:06,000 --> 00:12:11,690
So one thing that we also need to add to our select tags is the name.

156
00:12:11,910 --> 00:12:13,440
So let's just call this month

157
00:12:18,610 --> 00:12:22,660
and this one of the day and this one will be here.

158
00:12:23,590 --> 00:12:30,910
And remember that if we didn't want in January and fab and Mar to be what was actually sent through

159
00:12:30,900 --> 00:12:36,350
if he wanted it to be something different like a number corresponding we would put a value here.

160
00:12:36,370 --> 00:12:40,030
So for Jan we might put value 1 in this case.

161
00:12:40,090 --> 00:12:41,850
I'm fine with just having Jan there.

162
00:12:41,860 --> 00:12:45,130
I didn't specify how it needs to behave.

163
00:12:45,930 --> 00:12:48,670
So we come back here it looks pretty good.

164
00:12:48,660 --> 00:12:50,700
Everything looks the same.

165
00:12:50,710 --> 00:12:57,230
The last thing we really have to discuss is the actual password validation.

166
00:12:57,370 --> 00:13:00,680
So I want to just show you how you could go about finding that.

167
00:13:00,700 --> 00:13:09,860
So I'm just going to open up HMO length validation and let's try that.

168
00:13:10,930 --> 00:13:13,560
As you can see I've actually already been here.

169
00:13:13,840 --> 00:13:17,980
This is something I had to look up recently and it looks like.

170
00:13:17,980 --> 00:13:21,050
So this is Stack Overflow by the way if you haven't seen this before.

171
00:13:21,070 --> 00:13:23,850
This allows someone to pose a question.

172
00:13:24,510 --> 00:13:29,140
Is there any other attribute age him out there with the help of which I can set minimal length of value

173
00:13:29,130 --> 00:13:30,000
for fields.

174
00:13:30,370 --> 00:13:35,160
And then people provide answers and highest voted answers appear first.

175
00:13:35,530 --> 00:13:40,590
So this answer says you can use the pattern attribute the required attribute is also needed.

176
00:13:40,690 --> 00:13:44,770
Otherwise an input field with an empty value will be excluded from the constraint validation.

177
00:13:45,000 --> 00:13:45,770
OK.

178
00:13:46,210 --> 00:13:48,960
So it looks like this is all we need.

179
00:13:49,690 --> 00:13:55,500
So this is an input we give it pattern equals this weird looking thing.

180
00:13:56,440 --> 00:13:59,050
And then required and then this title.

181
00:13:59,110 --> 00:14:05,230
So before we even ask about what this even does and what this five common 10 does.

182
00:14:05,230 --> 00:14:06,640
Let's just see.

183
00:14:06,630 --> 00:14:10,620
So let's go ahead find our password and this is a lot of what.

184
00:14:10,620 --> 00:14:15,340
Being a developer is it's a lot of copying and pasting some things or finding some code and tweaking

185
00:14:15,340 --> 00:14:15,940
it.

186
00:14:16,450 --> 00:14:21,250
So we need to make this fit what we have which is an input name is password type because password.

187
00:14:21,460 --> 00:14:27,340
So just going to copy these three attributes.

188
00:14:27,340 --> 00:14:33,020
So now we have type his password pattern is five and 10 required.

189
00:14:33,340 --> 00:14:36,670
And Title equals five to 10 characters.

190
00:14:36,760 --> 00:14:41,190
So let's see what that does refresh this.

191
00:14:41,400 --> 00:14:45,180
Make sure we have everything else filled out.

192
00:14:45,630 --> 00:14:48,740
I click submit and it tells me please fill out this field.

193
00:14:48,820 --> 00:14:57,310
Five to 10 characters and type 2 and type 3 and type more than 10 doesn't work.

194
00:14:57,580 --> 00:15:01,290
But if I type five or six it does work.

195
00:15:01,300 --> 00:15:03,520
So let's explore a little bit more.

196
00:15:03,550 --> 00:15:05,170
Let's start with this one here.

197
00:15:05,320 --> 00:15:07,080
Let's change this to be.

198
00:15:07,480 --> 00:15:13,710
Password must be between five and 10 characters

199
00:15:16,960 --> 00:15:18,450
and refresh.

200
00:15:18,490 --> 00:15:22,300
Make sure we fill out everything else so we can get this error.

201
00:15:22,890 --> 00:15:29,200
And I click submit and you can see I get that message that we set password must be between 5 and 10

202
00:15:29,200 --> 00:15:30,670
characters.

203
00:15:31,480 --> 00:15:33,620
So that's what this title is doing it.

204
00:15:33,820 --> 00:15:36,710
It's basically the error message that is being displayed.

205
00:15:37,410 --> 00:15:45,120
So then the other new part is this pattern and this is admittedly a little weird but using this syntax

206
00:15:45,180 --> 00:15:52,120
we're just defining the length a range of full length that is acceptable for this input.

207
00:15:52,120 --> 00:15:56,740
So if we change this to be two to three

208
00:16:03,420 --> 00:16:10,670
I submit still not acceptable ones not acceptable but two is acceptable.

209
00:16:11,470 --> 00:16:15,460
So this is just defining a range or pattern that we need to follow.

210
00:16:15,930 --> 00:16:20,990
So there is definitely more to this you can do other things besides a minimum length or a range of lengths

211
00:16:21,390 --> 00:16:23,350
but that's all I needed you to find here.

212
00:16:23,350 --> 00:16:27,660
If you were unable to find that don't panic it's still very early on.

213
00:16:27,820 --> 00:16:32,110
But there are going to be more opportunities for you to attempt things like that.

214
00:16:32,160 --> 00:16:42,370
So I do have a full solution that I wrote up which is complete in that it has the full day and year

215
00:16:42,700 --> 00:16:45,860
and month inputs and you can see it's kind of a mess.

216
00:16:45,900 --> 00:16:50,790
I did not write this by hand and I did not expect you to write this by hand either.

217
00:16:51,100 --> 00:16:53,940
So we'll see how to actually generate this later on in the class.

218
00:16:53,950 --> 00:16:58,120
You could use javascript to do it for you so you don't actually have to write this off.

219
00:16:58,450 --> 00:16:59,580
So take a look at the solution.

220
00:16:59,590 --> 00:17:00,670
If you have any questions