What a cool example, right?
You can see our form is slowly starting to come together. But, let's talk about it in a bit more detail.
The example wasn't terrible, right?
The form looked kind of cool, but it wasn't great either.
Why wasn't it great?
Well, I can think of two reasons.
Firstly, we only using color.
In other words, we are signalling required versus optional status using color alone.
And this isn't good for colorblind people.
The second reason why this isn't that great, is that the standard convention on the web for required
status, is an asterisks or the word "required" being associated with the controls in question.
So then, in order to improve our form, why don't we look at a better example of indicating required
fields using not only the :required pseudo class, but it's also going to require us to use generated
content!
(sound: what) Whaaat? What is generated content?
Well generated content is done via us using and targeting pseudo elements.
For example, we can use the ::before and ::after pseudo elements along with the content property to make
a chunk of content appear before or after the affected element. And you'll often use the ::before and
::after pseudo elements when it comes to styling forms.
Just remember though, that the chunk of content you add is not added to the DOM, so this means it's
invisible to screen readers.
But what's cool about it, is that it is part of the document's styles. Because it's a pseudo element,
it can be targeted with styles in the same way that any actual DOM node can.
And this is really useful when you want to add a visual indicator to an element such as a label or an
icon, but you don't want it to be picked up by assistive technologies.
So is this making sense?
We looked at the required pseudo class.
We discussed the optional - that it isn't really that useful to us.
And then we discussed the fact that it's actually not enough just to target the required pseudo class.
Often when it comes to forms, we need more.
And one of the ways to add more is using generated content through using pseudo elements.
So why don't we go back to our form and let's improve our form?
In fact, what I want you to do is I want you to use a pseudo element to now add content.
Specifically, I want you to add the word "required", give it a nice cool styling
so it's very clear to a user that the first name and last name is a required field.
Let's give that a go.
Let's start improving our signup form.