WEBVTT

0
00:00.170 --> 00:02.900
Welcome back to yet another cool challenge.

1
00:02.900 --> 00:09.830
And this challenge is super cool because we're building a form, a very, very simple sign-up form I may

2
00:09.830 --> 00:10.370
add.

3
00:10.370 --> 00:16.100
And just a piece of advice when you are creating a sign-up form, keep it as simple as possible.

4
00:16.220 --> 00:21.140
You don't want to scare users away with asking for too much detail at the beginning.

5
00:21.320 --> 00:27.110
So anyway, this is a very, very simple form and you should be able to actually do this now, I think

6
00:27.110 --> 00:27.980
give it a go.

7
00:28.010 --> 00:31.540
What's really cool is we are not using any JavaScript here.

8
00:31.550 --> 00:35.090
This is pure HTML and pure CSS.

9
00:35.090 --> 00:36.770
So how does this form work?

10
00:36.770 --> 00:40.040
Well, we have three widgets: username, email address and password.

11
00:40.070 --> 00:45.740
They are all required, so you cannot submit the form without filling them in. And the browser gives

12
00:45.740 --> 00:48.860
us front-end validation right out of the box.

13
00:49.130 --> 00:55.550
When the user correctly enters information like his name, we get a green background and we get a little

14
00:55.550 --> 00:56.480
check mark.

15
00:56.720 --> 00:59.060
It's telling us we're all good to go with this form.

16
00:59.750 --> 01:00.960
With an email address,

17
01:00.960 --> 01:06.720
when the user starts typing an incorrect email address, it tells the user, "hey, your email needs to

18
01:06.720 --> 01:07.650
be valid".

19
01:07.860 --> 01:15.090
So of course when an @ symbol is included, followed by text, we get a valid email address according

20
01:15.120 --> 01:15.930
to the browser.

21
01:15.960 --> 01:22.230
Remember, from a front-end point of view, we cannot verify that it's an accurate email address.

22
01:22.260 --> 01:24.120
That has to be done with server side code.

23
01:24.300 --> 01:26.490
I'm talking about now front-end validation.

24
01:26.520 --> 01:29.940
This is now regarded by the browser as a valid email address.

25
01:30.630 --> 01:37.500
The password is also really cool here, because the password we've defined, or I've defined, as having to

26
01:37.500 --> 01:38.610
meet certain requirements.

27
01:38.610 --> 01:43.890
It's got to be at least six characters in length, at least one lowercase, uppercase and one number.

28
01:43.890 --> 01:49.560
So when the user just types random text, they get an error message saying your password must contain

29
01:49.590 --> 01:54.420
at least six characters, one uppercase, one lowercase, and one number. When the user does that ...

30
01:56.170 --> 01:56.710
boom 💥.

31
01:57.190 --> 01:59.010
It's all sorted.

32
01:59.050 --> 02:04.360
And of course the user then can submit the form and you can redirect it to the login page.

33
02:05.470 --> 02:06.760
Whew, so there we go.

34
02:06.790 --> 02:08.370
This is what I want you to create.

35
02:08.380 --> 02:15.670
It's going to be relatively simple, but we are using CSS, pseudo classes and elements quite a bit.

36
02:15.760 --> 02:16.420
I can't wait.

37
02:16.450 --> 02:19.030
I'll see you in the next solutions video.