So here we go, we have done the Personal Profile header, we've added one text input box, but I want
us to get more and more complex.
And again, this is very simple form, but you're going to be introduced to a lot of concepts when it
comes to forms.
So what's next?
Well, the input's type attribute lets us specify, call-it, out-of-the-box validation techniques.
If we got to our code, let's just expand this,
we can see that for that text input,
we had a type attribute set to "text". But let's now do an email.
And this type of email will allow us to perform very light validation in the sense that a email will
have to be submitted by the user.
The user can't just write random text.
Let me show you what I mean.
So here we go,
we did the one input type here.
I want another wrapper,
and again, it's going to be a form-row. Within here,
we're going to have a label again.
And this is going to be for an email.
Pretty straightforward, and we can have an input, but the type now is not text, we're going to have "email".
We can give it a name of email, so when its submitted to the server as a variable, we can extract
that value from the variables name, and that name of the variable is "email" 😵‍💫.
Hope that makes sense.
So if we save this, and we go back to our browser, there we go, we've literally got a nice looking email.
Don't worry about the styling yet,
we're going to fix that shortly.
And it's going to be super quick because it's exactly the same as our styling
above. So there we go.
There's the email. Something else
cool with emails and with pretty much any input element is that we can add a placeholder.
Let's go back to our code, and let's add another attribute called "placeholder".
And we can just give an example of what we want, like "wally@warthog.com". And if we save this, and go
to our browser, there we go.
It's literally put a placeholder inside that box,
this email text box.
And of course, when you start typing over it, it disappears.
Well, what can I say about this email type?
How does it differ from the text input type that we saw previously?
Well, first off the bat, they are very similar.
They both require text to be inserted into the box.
The major difference is what happens when it comes to validation.
If we are in Firefox, for example, and you start writing what I have just here, "asdfd", and you click
out of this text box, you'll see some validation error occur. With Chrome and with other browsers, they
only validate that input when the user submits the form,
so that's why we're not seeing any validation error messages now.
But don't worry, we're going to see a lot more about this later on in the course.
I just kind of want to give you a flavor. I want to start introducing you to these concepts.
But there's also more to it than just that.
When you tell the browser that this is meant to be an email address, the browser improves the UI experience.
If you're on a smartphone 📱, for example, and let me put it up on the screen here,
when the browser knows it's an email, it gives access to that "@" symbol on the keyboard, making
your life and my life a lot easier.
So that's starting to make sense? I hope so.
Before we move on, let us just quickly style this email, because it really is irking me that it looks
so terrible 😖.
So let's go back to our code.
And let's start styling. So let's go to our stylesheet here, and let me get rid of myself now so you can see the screen behind
me.
Say bye to Gerald 🦒! And let's start just applying some basic styles to our page.
Well, firstly, we've done a lot of styles here already when we look at this input type text,
right.
Remember that?
So all we have to do, for example, here is we can add the form-row,
oops, sorry, form-row
and now we want the type equal to "email". If we save that and we got to our browser, look at that! I told you
it was going to be easy.
I bet you didn't believe me, did you?
And let's go back here to our page,
and I think that was actually all. I mean, how easy is that?
There really isn't much else to it.
Now, remember I said that, you know, this email type provides basic validation.
Well, there's a pseudo class,
and don't worry about what this means.
We're going to get into it later in the course.
But for now, just realize when this error message happens,
when that validation fails, then the "invalid" pseudo class gets added to that element.
Let me show you what I mean.
Let's now
grab our wrapper class, our form-row, and of course, we want to deal with our input of type email.
But now, we only want to style this when the pseudo class "invalid" is activated. And when that happens,
let's just give it a border of 1.5px, so a bit thicker than normal, and solid
and let's give it a, I don't know, a reddish color and see if that works.
OK, and just to make it even more blunt, we can give it a, you know, a really horrible looking reddish
color.
212, 53, 56.
And what we can even do here, is we can remove any box-shadow.
Right, and this here, um,
let me just write a comment here, removes default red glow in Firefox.
I just wanted to put that there so
you know what it is. Now if we go back to our browser, there we go.
How awesome is that?
You can see that's an invalid result.
We remove this and we type a valid email, wally@warthog.com,
we can see it's not red anymore 🥳.
As soon as you do something funky, we apply invalid styles.
How awesome.
OK.
I hope you're having fun.
I hope you're really enjoying this.
And I'll see you in the next lecture.