Let's start by exploring the email input.
For that, I'll add another input here.
And now I'll set the type to email.
And I'll also give that input a name
so that when it is submitted,
we got an identifier which we'll be able to use
on the server to extract that submitted data.
And I'll just set this equal to "user-email",
though of course, that value is up to you.
I'll also add an ID to that input
and use "useremail" here,
one word without the dash.
So that we can also add a label
to connect that label to that input,
to describe what should be entered in this input,
because otherwise the input is not that self-explanatory.
And here I'll just say "Your email address".
Now on that label,
I'll then add the "for" attribute
to connect it to user email, so to this input.
And now we've got this input here as well,
and it looks exactly the same as the first input,
but an important difference here indeed,
is that now if we would visit this page
with a mobile device and we would tap into this input field,
a special kind of keyboard would be opened up there
so that we have an easier time entering an email address.
For example, by having easier access to the "@" symbol.
In addition to this special keyboard being used,
we also get some built in validation.
Watch what happens if I enter just "Max" in there,
which clearly is not an email address.
If I now click submit, it's not submitted.
Instead I get this error message, this warning,
by the browser automatically.
The browser tells me that this is not a valid email address,
and we get this because this is set to type email.
Now we are able to submit an empty field at the moment,
but we're going to come back to validation
in a couple of minutes later in this lecture.
But we already got this first check here
where the entered value is checked
whether it is an email address or not.
And that's this special type, the "email" type.
Next, let's have a look at the number input.
For this, I'll add another input
where I set the type to "number".
And this is an input which is optimized for,
guess what, entering numbers.
Let's say here, we want to get the user age.
So I'll add a label where I say "Your age",
and then here I'll point at an input field
with an ID of "userage",
which I'll therefore add as an ID here.
And I'll also add the name.
The order, by the way, doesn't matter,
you can have ID first and then the name or vice versa.
This absolutely does not matter.
It never matters for any attributes.
So you're all then set "user-age" as a name.
So to have this identifier,
which has submitted with the data.
And ID "userage" without a dash to connect this label.
If I saved this, this again, looks like a regular input,
but note that I have these arrows here,
which I get automatically by the browser
because I used type "number" here.
And they allow me to, well,
change that number in increments here.
Of course I can also adjust, enter number like this,
but I can't type anything else.
Here I'm trying to enter regular characters
and you don't see anything on the screen
because the browser blocks this.
So here again,
we got a slightly changed behavior
because we're using a different type.
And hence we forced the user to enter an expected value,
which of course ultimately is what we want to do
with our forms,
because we want to ensure that we're fetching exactly
the data which we need.
Now with the type "number",
you can also add a "step" attribute.
You can add this to the email input as well,
but there, it has no effect.
But on the number input field,
you can set a step which will affect these arrows
and basically change how this number changes.
The default here is one,
so that clicking these arrows adds or deducts one.
But you can also use 0.5, for example,
to then change this value in 0.5 increments,
as you can tell.
Or you change it to 100 or whatever you want.
Here, I'll leave it at one,
which is the default and therefore could be omitted,
but I'll leave it here for reference.
And that's the number input field.
And yes, we will also be able to control
a minimum and maximum number,
but I'll come back to that later
when we take a closer look at validation.
Now, let's have a look at the password input field.
For this, I'll add another input of type "password"
and just as before I'll add a label
where I say "Your password" or whatever you want.
And we'll connect us with the "for" attribute to,
let's say, "userpassword".
And then for on that input of type password,
I'll set the name to "user-password",
and set the ID equal to "userpassword" as one word.
And I pressed the auto format short cut
which is why all these self-closing forward slashes
were added here.
With that, now we got the password field.
And the special thing here is that whatever I enter,
you can't see it because it's hidden,
which of course is a common feature
we know from password fields.
Let's continue with the date.
For this, I'll add input of type "date".
So we're still always working with the same input element,
but the attribute, the "type" attribute,
controls which kind of input we expect.
So here we could request the birth date, for example,
and then render this input of type "date".
Give it an ID of "birthdate"
and a name of "user-birthdate", for example,
and then on the label,
I'll then point at "birthdate" like this,
to pick up that ID again.
With that if we saved this,
now we got this input here
and you'll notice that it shows us this little helper,
which we can even select.
So where I can select the different segments
to have an easier time entering my birth date.
And that's not my birth date, by the way.
So we can enter this year.
It also should automatically be adjusted to your region.
So if you're in the US,
the format will probably look differently.
And we also got this calendar button here,
which we can click to open a date picker,
which makes it easier to select dates.
So now we've got this helpful utility here
for this date input.
And whilst we could of course,
also fetch a date with a regular text input,
I could enter some date here as well,
we of course got more help
and hence provide a better user experience to our visitors
if we use that "date" type
so that the user gets some hints
about the expected format
and gets that date picker as well.