Awesome, awesome, awesome.
I've got my coffee â˜•.
I hope you do, too.
And now I want to start in this lecture
building a form.
Building a very simple signup form.
But we're going to be looking at this form again in future lectures.
So it's good if you can start with me here,
build it up from scratch so you know exactly where we're picking up from in later lectures.
So how do I want to build this form?
Well, we want a fieldset to wrap the entire form into one group.
The fieldset usually has a legend associated with it, a nice little heading.
And then, of course, I want to wrap each form control in its own div.
So let's get into it.
But first things first.
Mmm ...
sip of hot coffee.
Lovely ðŸ˜‹.
You know the drill by now.
We just starting with an empty file.
We want HTML, and, yes, we do want a style section.
We're going to be styling this for obvious reasons.
We're talking about CSS, right?
But before we can style the HTML, we have to build the HTML.
So let's do that within the body. And let's create a form.
We're going to wrap everything within these form tags.
First thing is first, like I mentioned, I want a fieldset element.
The fieldset element needs a legend.
And let's just say this is, "Sign Up
Now". If we save this, and look in the browser, there we go.
Very, very simple.
And then I want each form control wrapped within its own div tag.
So let's do that.
We've got a div.
We don't even need to put a class or ID on this, because we can just target it directly in CSS.
Each div is going to have a label, it's always good to get used to doing labels.
We can give it a for attribute value of fname, for, you guessed it, first name.
So there's our label. And of course we need an input with type set to text. The name we can give that
can also be fname, and the ID has to match the value of that for attribute on the label, which is also
fname.
If we save this, there we go.
We've got our first name. But I am wanting this to be a required field.
How do we do that?
That's right.
We put the required attribute on the input type of text.
Very, very simple.
Let me just expand this so it's easier to read.
So that's our first input control.
I want to create another one
now. We've asked for the user's first name, so let's create another div, a label.
Now I want to ask for their lname, and you guessed it, that is going to be their last name.
Again, input type text.
We can give it a name of lname, and now the value of the ID has to match that for attribute's value,
which is lname as well.
And of course, we want this required as well.
So there we go.
Those are the two,
well, let me have a comment here.
Two required input fields.
The last thing I want to do in this form is I want an email field.
Create an optional email field.
How do we do that?
Yep.
I want to wrap it in a div.
We need a label.
The for attribute,
we can give that a value of email.
And of course we can write here "Email Address" and in brackets
we can just say "include if you want updates".
So it makes it pretty clear that this is an optional input element.
What kind of input do we need?
You already know this ...
of type email.
That's 100% correct ðŸ’¯.
We can give it a name of email.
And of course the ID has to match the value of that for attribute, which is also email.
The last thing we need to do is ... how do you submit a form?
That's right.
Create a submit button. And we can do that by again, wanting to wrap every form control in a div.
And here we can just create a button with its type set to submit, and we can just say, I don't know,
let's go.
How's that?
Let's go to the browser.
Let's expand this.
And there we go.
I know, I know.
It's pretty hideous.
I don't like the look of this right now, but the HTML is done and you can see how quick this was for
us just to set up.
So now let's start including some CSS.
You know what I'm going to do?
I'm going to put this side by side. It's always nice and then you can kind of see how the CSS affects the styling
as we go.
Maybe I should zoom out here just a little bit.
How's that?
All right, my dear comrades, my students, my awesome, awesome friends, what should we do first?
Well, I think we should start off with a fieldset,
right.
Let's start off in a logical, from the top to the bottom, kind of order.
Let's give it a width of 40%, nah, maybe 30%.
And let's see what that looks like.
That's okay.
I don't like it stretching across the entire screen of the browser.
Let's center this now in the middle of the page.
Yep. And let's give it some padding.
You can already see how quick and easy, you know, transforming boring HTML to something nice can take.
Very, very quick and easy.
As I mentioned, we're going to be logically going in order here.
So fieldset.
Then let's deal with our legend.
Let's give our legend a nice a nice background color.
19, 197, 167.
Why is it not working?
I need a comma there.
Let's save.
And there we go.
It's like a turquoisey kind of color.
And the text
I don't want to be black, so let's just make it white.
There you go.
And let's give this some padding.
Five pixels and ten pixels.
And what else can we do?
Okay, the div we can target.
Remember, each control is wrapped within a div and they're quite bunched up to each other here and
I don't like that.
So let's just give it a margin
bottom of something ...
maybe 20 pixels.
That's better.
At least now they're separated.
All right, what's next?
What's next, my dear students?
That's right.
Let's target our input.
Let's set its width to 100%. And its parent is a div element, right,
so what I mean by 100% is that it's just going to stretch across the entire div.
The reason you still seeing gaps that it's not touching the edge is because we gave this fieldset some
padding.
If we make this padding zero then there we go.
It'll stretch across the entire width.
But anyways, we want padding of 20%, oh, 20 pixels
sorry.
So there we go.
That's width. The border-radius,
I don't like the square borders here.
Let's just affect that very, very slightly.
We'll make that 5 pixels.
How's that?
And then let's give this some padding.
Also 5 pixels.
I can actually zoom out slightly.
Yep,
how's that?
It's coming together.
Okay.
We've done our inputs.
What about our labels?
We can do our labels.
And let's just give our label some padding.
Next, let's target our button. That "Lets go" button
is pretty hideous at the moment.
Let's give it a width of 30%.
Let's put in the center, effect its display property to block.
There we go.
I also want to give this some padding.
5 pixels.
Font-size,
should we do 100%?
Let's give it a nice background color.
Like a nice blue.
I'm wanting like a nice blue.
Yeah, that's nice.
Give the actual text a color of white. Border,
I hate that
well, "hate" is a very strong word,
I dislike the default border there, so let's just give it none.
Yeah.
Much nicer. Um, border-radius
again, we just curve those borders ever so slightly.
Looks nice.
And let's give it a box-shadow just to finish it off.
Uh, you know what?
Let me give this,
what does 40% look like?
Yeah, that looks better.
At least now the text is fitting in quite nicely.
Now I want to target a few pseudo classes.
Firstly, when a user hovers over all of these inputs, I want the background color to change to visually
let the user know that he or she is hovering over them.
Very, very quick.
All I want to do is target our div, but I want to target the div when it's in its hover state.
And then when this is being hovered over, we want to select the child input element, right?
The child combinator CSS is denoted by the greater sign and the child we want to affect its styling
is this input element.
That's all I've done here.
And of course we want to affect its background. And I want it to be a kind of a gray color.
243, 243, 243.
Right.
Should we see if this works?
Let's hover our mouse over, and look at that.
Very, very cool and intuitive
right?
I love it.
Why don't we do the same thing for the button?
So we grab the button, and we want to affect its hover state.
All we want to do is change its background color.
And, let's make that 1, 82, 114.
There we go.
Let's see if that works.
And it does.
See how easy and quick this is?
But the lecture was all about this :required pseudo class.
So, let's use the :required pseudo class to style up our form.
How do we do this?
Well, firstly, let's grab our input element and target its state of required.
And remember, we need a selector,
the colon, and then the pseudo class.
It's this easy.
And we've seen many examples of this in the course.
Let's just give it a 1 pixel solid border of
I don't know, let's do it 223, 20, 13 and 0.85.
How is that going to look?
So when the page first loads, we know that the first input there is required.
Why is last name not red?
This is a concern.
So let's look at our file here.
There we go.
Not "aria-required".
We just need it to have the "required" attributes.
Let's go back to our browser and there we go.
When it loads up, you as a user now visually know that these two are required.
How awesome.
Oh, this is fun.
This is fun.
So we've dealt with targeting the :required pseudo class, but what's really cool is that we can combine
pseudo classes.
For example, we can style an input that has a required attribute,
and that is in focus.
What!
That's weird, right?
But it's very easy.
You'll see
now. Let's target our input element where it's pseudo class is required,
but at the same time, we only want to affect its styling in this case when it has focus.
So there we go.
We are literally using two pseudo classes. And to prove it to you, let's just give it a border
I don't know, 2 pixels solid, and I don't know,
should we do orange?
I kind of view red is bad, green is good and orange is kind of in an intermediate state.
And let's just remove the outline.
I don't like the outline.
Okay, let's see if this looks good.
Let's go to our browser and let's give it focus
now. Let's click inside this box.
There we go.
How awesome is that?
That's very cool,
right?
Of course, it's not affecting the email address field.
Do you know why?
100%.
It's because of this required, isn't it?
If we take that required away, go back to our browser.
Now it will affect the email field, but we only want to affect those that have the required attribute
on them.
So there we go, making a lot of sense.
The other thing I do want to mention to you, and we have mentioned it in the lecture, is this optional pseudo
class. That is available to us.
Let me just put the side by side.
How do we use this :optional pseudo class?
Well, we could ... you see the email address there?
We know that that is the only optional element in the form.
So let's target that now.
But instead of targeting it with using CSS by targeting the type of email, which we could do, let's
now target the pseudo class of :optional because we know that is an optional form control, and let's affect
its border
right?
I don't like the default border that the browser provides and let's give it 1 pixel solid silver.
We save it.
And there we go.
You can see that it's updating that email address field.
But as I mentioned in the lecture as well, it's kind of pointless in a way because we don't even need
to have this optional element.
We can just style the default look and feel of all inputs without it.
And if you do that, we get the same result.
So it seems kind of pointless.
But you know what,
I guess it doesn't harm to be overly specific when it comes to coding because then it makes it very
clear what it is you want to achieve.
So here we go.
This is a cool form.
We're going to be working with it, like I mentioned in a few lectures going forward, and you might
be thinking right now, "Clyde, this is an awesome little signup form, very clear and very intuitive".
But, I beg to differ.
It is a good form, but there are a few problems with it.
So let's hop back over to the lecture.
Well, let's take a break, hop over back to the lecture and let me explain what I think we could
do to improve this form.
See you now.