The first type I want to look at is drumroll ... 🥁 ... the input of type email. And what is this type all
about?
Well, it's pretty intuitive.
The user is required to type an email address into the field.
And what this means is that any other content entered into that field, causes the browser to display
an error when the form is submitted.
So it is a helpful aid to guide users to fill out a form accurately.
And more than that, it can save time because it's useful to know that your data is not correct immediately,
rather than having to wait for a round trip to the server.
So it's always good to perform some front end validation before sending data to a server.
Another useful thing to know is that you can allow multiple email addresses to be entered, by including
a boolean attribute called multiple.
Each email address in that instance will have to be separated by a comma, so the attribute will look
like this ... multiple.
And in this instance, each email would have to be separated by a comma.
So just make sure you make the user aware that a comma has to be the separator.
But other than that, it's pretty intuitive.
Alright, well, what's another useful reason to have email?
Well, on some devices, notably touch devices with dynamic keyboards like smartphones,
a different virtual keypad might be presented that is more suitable for entering email addresses, including
the @ symbol.
So here's an example of an Android and an Apple where you've got those @ symbols.
It just helps you. Remember we are trying to make filling out forms as easy and streamlined as possible for
a user.
Let's hop over to the console, and just see how this email type works.
It's very, very simple.
All we need to do is set up our HTML. Body. Within the body, of course, there's a form.
And in the form, we can start with our input of type email.
You can give it a name of email, an ID of email.
Save it, refresh the page, and we can see right now it looks exactly like a text input.
And of course, we need a button with type submit, just so we can submit this baby.
And, of course, if you type anything like this, "asdf" and we click submit, this is what's really cool,
we get an error message.
This is built-in front side validation, by the browser.
How awesome is that?
And of course, something else you might want is a label.
Remember, the "for" has to match the ID of the input we want it to attach itself to.
And here, we gave the input an ID of email.
So the for attribute has to have email and, you know, we can say "Enter your email".
How does this look?
There we go.
And if the user obviously clicks now on the label, the input box gets highlighted.
How cool is that?
But ...
if we type some random email like abc@abc, and we click Submit, in this instance, the browser will
not stop us from sending the data, even though you and I both know that was a fictitious email.
Let's jump back into the lecture.
What else can I say about this type of email, specifically when it comes to validation?
As I've mentioned, the email type gives us built-in client side error validation. And when it comes to
styling,
just remember that the :valid and :invalid CSS pseudo classes are automatically applied as appropriate,
to visually denote whether the current value of the field is a valid email address or not.
So just remember you can target the :valid and :invalid CSS pseudo classes.
Very, very interesting.