All right.
You know the drill.
We've got an empty index page and an empty styles.css file.
We're going to create a simple HTML page.
Yes, we're going to have a head section.
And in here we're going to just link to our CSS file called styles.css.
Very simple.
We've got a body.
Within our body,
I want a form.
We don't even need an action.
What we can do here, is we can first set up the username input field.
We can wrap it within a div, and we can have input of type text.
A name we can give is first_name, ID we can give first_name.
We want this to be a required field.
Let's just put a placeholder for now as an empty string.
How's that?
Save it.
Refresh the browser and there we go.
A plain boring old input text field.
I do want a label for this.
The "for" has to match the ID of the input, which is first_name.
And the label can just say Username.
There we go.
Pretty straightforward.
Um, under this we can have a span, because later I want to add that check mark.
Remember in the introduction we saw when it's valid, we have that little check mark on the right of
each input.
Well, I'm going to wrap that in this span. So it can be empty for now.
But all I want to do is I want to give it a class of checkmark.
So let's expand this.
This is what it looks like.
We've just done our username.
Pretty straightforward, right?
Let's just copy this, paste it, and now I want to do an email.
So of course the type is not text, it's email. The name and ID,
and label can all be email. Again,
I want it to be required. And we can leave the placeholder as is, except username can be email
address.
And again, I want the span with a checkmark.
But there's something else I want
here my dear students.
And that is, an error message. When the user doesn't incorrectly type their email,
I want to show the user a message.
Let's wrap that in a div
why don't we, and we can give it a class of errorMessage.
Very simple.
We can type anything we want here.
Let's just say your email needs to be valid. How's that? If we go to the browser,
there we go.
It looks like a big mess at the moment, but don't worry, that's where CSS comes in handy.
Let's copy this email and you guessed it,
let's do our final, final widget, which is a password widget.
So let's do our password here.
Input type of course is password.
We can just change all of these to password.
It can also be required.
The other thing I want to add here though, my dear students, I want to be a bit more funky.
I want to add a pattern attribute.
And we've seen examples of this a lot.
But this pattern I want to be very specific.
I want the password to contain at least 6 characters.
Well, you know what?
Let me actually write it out here - the error message.
Your password
must contain at least six characters,
one uppercase,
one lowercase and one number. And I want to do this with regex, with a regular expression.
And we know HTML accepts regular expressions in JavaScript format which we just include within these
quotation marks.
Very simple.
And I'm going to be very, very quick here.
The first thing I want to define is I want to say that we need at least one number. And we can do that
by using this \d, which is equivalent, by the way, to using 0-9.
I don't know, just showing you different ways to do things, I guess.
Um, and then also want to now define lowercase.
We can have any number of lower cases,
um, which is a
to z.
And then now, obviously, I want us to target at least one uppercase
right, A -Z.
And then remember, the last thing is it has to contain at least six characters, this password.
So we can just plug that in on the end with curly braces.
And the first argument is the minimum and the second argument is the maximum
right?
We could define a very large number or just leave it blank.
Let's just leave it blank.
So there we go
my dear students, this is the HTML.
And if we go to our browser now and we expand it, it just looks like a big ugly mess.
But this is what's really cool with CSS, right?
Because we can transform this very, very quickly and very easily.
So let's start. Let's go to our styles.CSS page. Now we can do it side by side so you can see the
changes in real time.
And let's start coding, right?
Let's affect the body first.
We can do the background #333.
How's that?
There we go.
Let's change the font-family to, I don't know, sans-serif.
Yeah, that's fine.
And let's provide 20 pixels of padding.
That's good.
Let's now target our form.
We know we've wrapped this entire thing in a form. And we can give it a max-width of 100 pixels and let's
center it.
Zero and auto.
There we go.
The next thing I want to do is I want to target our form, and then I want to target the div element,
which is a descendant of the form. And let's change its position to relative.
We can change its background to white.
I know it looks pretty hideous, but don't worry, we're going to get there.
We can change, or put a border at the bottom, to demarcate each input, of one pixel solid, and it can just
be off white.
There we go.
So we've got the username, the email, and the password.
Oh, you know what I haven't done, my dear students, I haven't put a submit button.
So let's do that right at the bottom.
Let's just have input of type submit, and value can be "Sign Up".
I just remember now, looking at it.
Okay, cool.
So that's the div.
The next thing I want to style is let's target the form.
Within that we've got the div as a descendant.
Within that we've got the labels to each form widget.
Let's set the opacity to ... I don't know ... 0.3.
There we go.
Looking a bit better.
Font weight.
let's bold it up.
Position, we can set it to absolute. Because it's absolute
we can actually target its top property, push it down a bit, left 25 pixels. I know, it's looking
pretty hideous now, but it's going to look better.
It's going to look better.
Let's target now the form div input.
right.
We're targeting the input.
We want its width to be 100% of the entire container.
And then we don't want default borders.
We want to remove those default borders, and then we want to put now padding. I want the left padding
to be 50 pixels and all other padding to be 20 pixels.
Right?
So the top right bottom and then left must be 50.
And there we go.
It's starting to come on.
Let's just zoom out a little bit.
And you can see we are showing all the error messages.
We better hide that shortly.
We'll do that soon.
You see, when we focus, we've got, you know, we've got that horrible border.
I want to just remove that.
I want to be very explicit as to what styling we apply to this form.
So, let's target the input
but this time when it's in focus.
So we targeting the CSS pseudo class of :focus, and I don't want there to be an outline.
So when we focus it now there is no outline.
Pretty neat, right?
And we can also change the background when it's in focus to 231
231
231.
How does this look?
There we go.
It's taking shape hey!
I love this stuff.
The next thing I want to do, is you can see the labels there -
Username, Email Address & Password.
When the user focuses on that widget, I want that label to have zero opacity.
How can we do that?
Simple.
You know what I want to do?
I want to grab our form div input.
Just being explicit here.
But this time, well, there are few ways we can do this.
One, we can target all our inputs because we want the same logic to apply to every single input.
But we could also be more explicit by going like this ... and going with type text, right,
and when it's in focus, plus,
and that "plus" just selects the first element in ...
well let me write a label here ...
well, let me put a comment.
Right.
Select the first label element and we do that by using the plus sign after the input with type with
focus.
That's all I'm doing here.
Right?
And of course, I want to set the opacity of that label to zero.
So when the user focuses on username, it's gone.
How cool.
But the problem with this is then we would have to do exactly the same for each other input, right?
By using a comma, and it just takes space.
So I could do this.
But instead of text, we've got email.
If I hover email, it disappears and username and password is still there. But
it's irritating, isn't it?
So instead of doing this, we can just target all our inputs when they are in focus and then it should
work.
Email, Password ...
How cool
my dear students, how cool.
But there is a problem here because look, let's say the user's name types "Wally", and he or she then
loses
focus on that widget.
Look what happens.
Oh, man
the label is back!
No, no problem.
All we have to do again is do pretty much the same thing.
Targeting,
you know, we're working down the chain, the form, then the div, then the input
but this time I want to target that input when it's :valid. And we're going to target that label and exactly
the same thing
we want to set its opacity to zero.
So there we go, the user types
"Wally", and toggles out that label doesn't come back because it's valid.
Pretty intuitive.
Okay.
We are working through this.
The next thing I want to do, is I want to now target when it's valid.
So let's work our way down the chain to the input.
And this time we want to target the :valid pseudo class.
And when it's valid, we want to change the background color.
And it can be 194, 255, 214.
How does that look?
Oh, that is just beautiful.
Isn't that cool?
All right, so that's the form where its input is valid.
Same with email address ... man that's cool! And password ...
oh!
Why is password valid?
That should not have been valid.
Look, if I type one character, it's valid.
So there's something wrong in my
pattern.
Oh, why is there another [curly bracket].
Shouldn't be there.
Okay, let's go back to our browser here and let's try again.
Okay, good.
I'm typing characters.
Nothing's happening.
Let me do one uppercase.
Nothing happens.
But if I type a number now, it should go green.
Would you agree with me?
Let me push the number one.
Yes.
It's always nice when it works.
So there we go.
We know that our input where type is set to password is working correctly.
Our regex is working.
Awesome.
Okay, let's go back to our CSS file.
Okay.
Now I want to work on that checkmark.
I want to put a checkmark there.
How can we do that?
Well, remember in our HTML we've got this span with class checkmark.
Let's put it inside there.
So all we need to do is grab the span where its class is set to checkmark, and want to target the ::after
pseudo element.
We can set its content to nothing.
Display inline, position can be absolute.
Because you'll see what I want to do.
I actually want to push it all the way to the right.
That's why I want to use position of absolute.
In other words, I want to access the right property and assign it to the value of zero.
The width you can make 35 pixels.
We actually need to see this.
So let's quickly do that now.
Let's first go to Google and try and find this checkmark.
And here, toptal, this is quite a nice site.
I showed you this one before, by the way.
We can just copy this checkmark and we can put it into our HTML.
That's why I just wanted to go to that site specifically.
So how do we put this checkmark in?
Well, we only want it to apply when it's valid, right?
So let's work our way down the chain ... input of type valid,
but then I want to now target its sibling of span.
We know it's a sibling, and I want to target the span's ::after pseudo element and I want to change the
content.
Remember above, its default content is blank.
I want the content to now be a check.
So now if we type username and we type Wally, we've got a check, but you can see that it's shoved
all the way to the top, so why don't we push it down.
Much better.
And why didn't ... it needs to be a bit, maybe bold. Font weight,
bold.
That's better.
And of course, if I just, if we don't push us to the right, it's
it's not going to look nice.
You can see it's actually outside the widget entirely, which is why I set the position to absolute.
I think that looks quite nice
hey?
You can see how easy this is as well,
my dear students, you know, to create a really nice intuitive looking form. It doesn't take long.
Okay.
The other thing that I want to do is I want when it's invalid, I want us to show that big red box.
I want the user to know it's invalid.
So again, we can work our way down. And we don't have to do this
by the way, I'm just showing you, you know, because as your sites become more complicated, you want
to be very specific.
So here we are, we are targeting the input
with the class invalid. And I want to set its background
to pink.
What I don't like about this is you don't want to log on to a page and see everything red.
It's only when you start filling out the form and I'll show you a neat, neat trick.
Did you notice when I wrote the HTML that I put a placeholder and I put empty text because you and I
know when a user toggles an input widget, that placeholder disappears.
And what's really cool is that CSS has given us a :placeholder-shown pseudo class that we can target
and they've given us the "not" keyword.
So I want to say, only show me an error of pink, right,
and I'm going to use the word not,
when the placeholder is effectively not shown.
That's what I'm trying to say here.
That's what I'm trying to say.
So I'm targeting the :invalid pseudo class, but only when the placeholder is not shown.
So when the user clicks on username and types Wally, it's fine. Email address, when they start typing
an invalid one, it doesn't work, but as soon as it becomes valid it goes green.
How awesome.
Same with password.
We know it's invalid now.
As soon as they do an uppercase and a number it goes green.
How awesome.
I think it's looking pretty good, my dear students, don't you?
All right, well, let's continue.
The next thing I want to do is I want to ... let's target this error message. Form, div,
we know it's in a div, right?
And we gave it a class of errorMessage.
Uh, padding
zero,
30 pixels,
zero, 50 pixels.
You know what?
I think this label should also be in line.
Let me scroll up
here, where is the label?
Here we go.
Let's do 50.
That will look better.
Then it's all in line, right?
Okay, cool.
So we've given padding to the error message.
What else can we do to it?
We can change its color.
Just off black.
Max height zero.
Starting to look better.
And overflow should be hidden.
So now we can't see anything, right?
But don't worry.
It's going to work.
Trust me.
Transition.
Let's make this animated because you'll see shortly that that actual widget will expand to show the
text of the error message.
.25 five seconds.
How's that?
And the error message can be a red color to make sure the user sees it.
It can be italic.
There we go.
We can't see it yet.
And why can't we see it?
Well, it's because of this max-height property, right?
If we remove that, we can see that our error message or messages are displayed.
So we've set the max-height to zero.
But what we want to do is we want to now not set it to zero when there is an error.
So, access the form, work our way down the chain to the input,
we are targeting inputs where it's pseudo class is set to :invalid,
right?
If we just do this, and we target the sibling, that's just a sibling, it just means a sibling in CSS,
I want to find the sibling element where the class is errorMessage, which is that div.
And now I want the max-height to be, I don't know, 250 pixels - that might work.
And let's you know, it's not quite right,
let's give it some padding.
20 pixels, 20 pixels, 20 pixels and 50, because we're always giving 50 pixels to the left.
Man, that looks a lot better.
It looks good, man.
Okay.
But you'll notice now that it's displayed all the time.
We don't want it to be displayed all the time.
And again, all we have to do is we have to target CSS's "not" word.
And we can access this placeholder-shown property again,
right?
Because when it's not shown, then we want it to apply.
So when the user starts typing an invalid email address, we get an error.
And of course it's all fine.
Password.
Same thing.
Starts typing it, password is invalid.
When it becomes valid again, it disappears.
How awesome.
Oh man, this is cool.
All right.
The final step is I just want to target that signup button.
Very, very simple.
We can target the input where it's type
is set to submit.
Okay, Very easy.
We can display block, and give it a width of 100%.
We can give it a margin.
Yep,
of 20 pixels above and below. Background,
let's just give it D40040.
How's that?
White border
zero.
Padding 20 pixels all around.
And let's increase the font size.
Font size.
We can just do 1.2rem.
There we go.
Come on.
You gotta,
gotta be PROUD of yourself.
I mean, this is a really cool, simple form, and you've come a long way.
I mean, we got the checkmark from the site.
I guess I can close it down now, but it's a very intuitive form.
You can see how easy it is to create cool forms. When the user starts typing
"Wally", we get a checkmark. When the user starts typing an incorrect email address, we are told so.
So, when it starts becoming correct, we get another check.
And the same with the password.
My dear students, this is what this course is all about.
It's equipping you to be able to build forms very quickly, to understand how to target the :invalid,
the :valid, the ::before and ::after pseudo elements,
putting in checks like this, you're starting to understand how to build them now. And it's really, really
awesome.
Pat yourself on the back.
You've learned a lot already in this course, but we're not done.
We've still got a lot of other elements to learn about.
In fact, up until this point, we've only really learned about the input element, haven't we?
I know it can seem quite daunting, but, you know, have a lot of fun along the way.
We need to enjoy what we do.
And yeah, I've enjoyed these challenges and I'll see you in the next lecture.