As always, let's start with an empty file.
We're going to have a head section in here, a style section.
But for now, let's just build our form very quickly, right?
So within the body, let's have a form.
We don't need an action attribute.
We're not worried about submitting it to a server just yet.
Let's have a label attribute here.
We can just give it a for attribute value of "choose".
"Would you prefer a banana or cherry?"
I know, I know.
It's random.
I just want to give you an example.
And then, of course, let's have an input where it's type attribute is set to text.
Got it.
And then we can give it a name attribute of "i_like". And I'm giving it a name attribute of "i_like" because
if we don't, it won't be submitted to a server.
Remember, in order for data to be submitted to a server, we need name:value pairs.
So the name we're giving it here is "i_like". We know the ID value has to match the for attribute's value
of "choose".
The last thing I want to do is add a button of type submit, and we can just have submit. Save it, refresh
the browser and there we go.
We've literally got our input.
As I mentioned in the lecture, one of the most simplest HTML5 validation features is the required
attribute. And to make an input mandatory, we just need to add this attribute to the element, right?
Because right now the user can submit this form - "i_like" gets appended to the URL, but there is no value.
If we want to make it required,
all we have to do is add the required attribute to this input element.
It's a boolean attribute so we don't have to assign it a value.
It's either there or it's not.
Now, if the user tries to submit, the browser will prevent the user from doing so.
And what's really cool is that when this attribute is set, the element is going to match the :required
UI pseudo class.
It's going to match this whether or not there is a value.
And remember, the form won't submit,
it's going to display an error message when the value is missing, when the value is empty. And while
the value is empty, the input is also going to be considered invalid, matching the :invalid UI pseudo
class.
So right now when the user tries to submit,
notice how the input box gets focus, and we get this error message displayed to us by the browser.
Let me prove that some of these pseudo classes are working.
Firstly, what we can do is we can target the input element where its state is invalid.
And let's just be very simple here.
2 pixels, pixels solid red border. And this is the default starting point.
The default when we've got a required attribute on an element is that it's going to match the invalid
state because it's value attribute is empty, right?
But once the user starts typing, say they want a banana, it's not red anymore, aka it's not invalid
and the user can submit the form.
But of course once it's submitted it goes back to that invalid state.
What are some other things I can show you?
Well, why don't we target the input, right, where its state is invalid?
But remember I said it's also going to match the required state.
So why don't we target this and we can give this a cool background image styling. We can give it a
linear-gradient and let's just say pink, and light green, save that.
So there we go.
We know now that it's matching the required state and it's matching the invalid state at the same time.
Can you see how the pink is flowing from top to bottom? If you don't want that,
for example, with this linear-gradient method, we can just say here "to right".
And of course it's going to go left to right
now - the pink starts at the left, gradually turning into green from left to right.
That's just a bit of FYI.
And then finally, we can also target the input, but this time when it's state is valid and let's just
give it a border of 2 pixels solid green, right?
We save this. When the user starts typing banana,
can we see, or can you see that there is a green border?
Of course, it's hard to see because we've also got an outline - that black outline.
So why don't we remove the outline.
Set it to none.
User starts typing banana.
And there we go.
We know now it is valid.
You got to got to be enjoying this stuff.
It is so interesting and it's so fun.
Once it clicks, like it's just becomes very intuitive, very easy to start styling your forms in a
very, very fun way.
But anyway, these are the simple built-in validation pseudo classes, but they are more.
And in particular, there's one I want to discuss with you now.
So let's jump back to the lecture.