I am super excited this time.
For real,
for real excited.
Because now we're going to be talking about perhaps one of the most important pseudo classes you can
target to style forms in a very cool and intuitive way.
Can you guess what the pseudo class is?
You've seen it many times already.
That's right.
It is the :required pseudo class. And one of the most basic concepts with regards to client side form
validation is whether a form input is required.
And by required I just mean does it have to be filled in before the form can be submitted to a server?
If it's not required, it's optional.
Right?
As I mentioned, :required is a pseudo class selector specifically selecting or finding form elements
that are required.
More specifically, it's used to select form elements that have the required attribute set.
Remember, we put this required attribute on a lot of our form controls.
It's either there or it's not.
So it's a boolean attribute.
And it doesn't work in all HTML.
It only works on selected elements.
It works on textarea, inputs and the select element.
And these elements have a required attribute available to us in HTML, which when set, just means that
you have to fill in that control before the form will successfully submit.
"Okay, Clyde.
That's a required pseudo class.
But what about if it's not required?"
Well then we've got this :optional pseudo class, and this :optional pseudo class only targets input and
select elements.
And of course it's going to target all the elements that don't have the required attribute set.
And one could argue that this could be useful if you want to give optional fields a specific look,
maybe slightly less visible than required ones.
But hang on.
What, what is this, professor?
What,
what do you want to say?
You'll probably not find yourself using the :optional pseudo class very often.
Why is that?
Well, form controls are optional by default, Clyde, so you could just do your optional styling by default
and add styles on top for acquired controls.
That is a very good point.
So I actually don't see much use of this :optional pseudo class at all.
In fact, I don't remember using it even once.
I always use required and of course your optional or your default styling you just apply
anyway.
Thank you very much, Professor.
You can go now.
So there we go.
We've looked at required, we've looked at optional.
And before we continue with this lecture, I do want us to hop over to the text editor quickly because
I want to build a signup form with you and I want to specifically target the :required pseudo class in
order to style it a certain way.
Let's do that now.