I did mention that this type attribute
would be important.
And indeed, there are different values we can set
for this type attribute and that will then influence
which kind of input is expected from the user.
Now we learned about type text,
which in the end is responsible
for displaying a input field
that wants a single-line of text.
And with single-line, I mean that,
of course the text can be as long
as the user wants it to be.
Unless we as a developer restrict it,
which we're going to learn about later,
but that you can't enter complex multiline text that easily.
And that's the default kind of input field
which you also get if you don't set a type at all.
Though, as I mentioned,
it is recommended that you do set a type
to make it very clear that your intention
is to have this kind of text input field.
Now there are other common types as well though,
for example, to type email.
This also renders a input field
that looks exactly like the other input field,
but an input field that actually wants an email address
and difference here is that if you do visit this website
on a mobile device, for example,
you get a different keyboard that opens up
on that mobile phone.
You get a keyboard optimized
for entering email addresses,
which of course is nice to have
and greatly improves the user experience.
In addition, you will also get some built-in
input validation as you will see in a couple
of minutes.
When a user enters something, which is not considered
to be a correct email address,
the browser will show a warning then, but again,
we'll see this in a couple of minutes
another a useful type of input,
which you can set is the number input.
If you want some number,
let's say an amount to be paid
or any other kind of number
you can set this input type and then you, well,
do you have a input which is optimized
for fetching some number input.
Again on a mobile phone,
an appropriate keyboard will open up,
which makes it easier to enter numbers by focusing
on numbers.
And you've got a couple of other nice features.
In addition, we're going to see this in action soon
as well.
Now another useful type of input
is the password input type.
This is generally the same
as the default input type,
but it obscures, it hides the user input
so that if someone is standing behind that visitor
of your website, that person will not be able
to see what was entered.
And that's of course, the default behavior, you know,
from password fields that you don't see
the value was inserted there.
Now another nice input type,
nice to have is to date input type,
which will display a input field optimized
for entering dates.
For example, in most browsers,
a date picker can be opened once the user clicks
into that input field, hence making it easier
for a user to select a date.
But that's not all.
We also for example, have to type radio
for rendering radio buttons.
And this might sound weird,
but you have definitely seen them before
and you will see them again in a couple
of minutes.
With radio buttons, you can render multiple choices,
where only one choice can be active
at the same time.
We also can render checkboxes with type checkbox
which is a yes no
kind of toggle button where the user can either
check the box or not check it.
You might know that from forums where you agree
to some terms, for example.
Another interesting type is the file type,
which renders a file picker where users can select a file
that then should be uploaded to some server.
In this core section will not be able to upload it yet,
because we're lacking the server side part,
but we can at least have a first look
at this input type.
And there also are a couple of other types,
which you can check out on MDN because those
are types which are not used that often
and which also don't have that great
of a browser support, which means that you might be able
to set that type and it might work
in Chrome, but it doesn't necessarily work the same
in other browsers.
And that's why here I focused
on the most common and well supported types.
And we already got quite a bit
of different types here already.
And of course, therefore, we're now going to take a
closer look at those different types
over the next minutes.