Now that's basically it for forms
and form elements.
And it is a lot of knowledge that we gained in this module.
A lot of key elements,
and especially attributes you learned about.
And speaking of attributes,
there are a couple of last attributes and concepts,
which I want to sum up in this lecture here,
because they also are helpful from time to time.
For example, you can add placeholders to your input fields.
Now what's a place holder? Let's say,
for the name, we want to show the user,
which kind of format we want here,
that we want a first name and a last name.
Then we could add to this placeholder attribute.
And as a value, we set some placeholder text,
which will be shown if the user hasn't entered anything else
like Max Schwarz.
If I save this, this text shows up here
in a light gray color.
Now this is not the same as setting a default value
with the value attribute.
That's not the same.
The value set with the value attribute
will be treated as if the user entered it.
The placeholder value, on the other hand, will be displayed,
but it will not be taken as an entered value.
If I try to submit the form without entering anything
on my own, with just a placeholder,
I will still get the warning here
because I need to enter a custom value first.
Nonetheless, the placeholder can be a good thing to use
to show some extra hint for a given input.
You should not use it as a replacement
for your labels though,
because the placeholder does not have
the same accessibility value as the label has it.
And in addition, it has a disadvantage.
If I comment out this label element here for the email,
for example, and instead I would try to use
the placeholder as a label.
Then, on first sight, it looks like it works
because it shows your email here.
But as soon as I start typing here,
the placeholder disappears.
And the problem with that is that
if it's a more complex form,
I can then easily forget which kind of value
should have been entered here in the first place.
And that's why you should always have a label
as a separate element, which does not disappear
as soon as you start typing.
Only use a placeholder as an additional hint,
which you might want to show.
Now, another useful attribute that is worth knowing
is related to the text area.
There you can set a rows value,
and that will basically influence
how many rows are displayed. How big that text area is.
If I set this to eight, for example,
you'll notice that the text area is way bigger
than it was before.
Now, this does not mean that
only eight rows of text can be entered.
You can still enter more and it will start to scroll.
It just means that eight rows will be displayed by default,
that the height of this text area will be
high enough to accommodate eight rows.
Now, you also maybe noticed,
by accident or because you know it already,
that you can resize this text area.
There is this handle in the bottom right corner,
which you can use to resize this text area.
And while this sometimes can be a nice feature,
it of course can also break your design.
So therefore you can also disable this resizing.
However, not with an attribute,
but instead with a CSS property.
Here, we can select a text area and then set resize to none,
and this will prevent resizing.
Alternatively, you could set it to horizontal or vertical
or both, which is the default, to only allow resizing
in one direction. For example, if I set it to vertical,
then I can only resize to the top and bottom,
but not to the left and right.
And if I set it to none, this cannot be resized at all.
And that's the last feature
which I wanted to highlight here.
Definitely feel free to dive into MDN
to learn all about these elements right now.
Though we will also see many of these elements
throughout this course
as we build multiple forms in various course projects
in this course, but feel free to do so if you want.
And of course, feel free to play around
with the existing form,
which we built here with the different styles
and attributes, and also dive into that challenge,
which I prepared for you and which we are going to explore
in the next lecture now.