Now that's it for the different input fields,
which I want to show.
We are going to explore the file input field
later in the course,
once we're able to also handle the file upload
on the server.
That's what we'll ignore it for now.
And therefore, I now want to
come to an end,
at least regarding that overview of available HTML elements
by having a look at the text area
and the select element,
which are the last two important elements
I want to introduce.
And let's start with the text area.
For this,
and it is quite long form,
which we'll restructure with HTML a bit later,
I'll come back to the top here
and below my username,
before I have the email address field,
I want to add a new input,
which allows the user to enter some multi-line text.
Let's say here, we expect your message.
So the label says your message.
And now we could use input type text here,
but this will always render such a single line input.
And for a message,
we might want a multi-line input
where the user is able to
write longer texts in a more convenient way,
and also structure this text with a line breaks and so on.
And for this, we got the
text area element.
Now the interesting thing about this text area element
is that it's not a white element,
but that it has a closing tag.
Why? Just for historic reasons,
there really is no good explanation for this.
It's just something you have to memorize.
Input is a wide element with no content between opening and
closing tags and therefore no closing tag.
Text area also typically has no content
between opening and closing tags,
but it still has a closing tag.
Yeah, it is what it is.
Now. We can still use it as we learn it before, though,
we can connect the label by using an ID,
for example,
user message.
And adding that ID here,
to the text area like this.
We don't have a type attribute here though.
A text area is always there for a long standard text,
not for a long email address or anything like that.
Hence, if I now saved this, we got this text area here.
Now it's currently unstyled and therefore I'll go to
Styles CSS,
and I want to give it the same style as I have for my input.
Hence, I'll use this group Combinator
and add a comma after input
to apply the same styling rules here,
not only to the input,
but also to the text area selector.
So two text area elements.
And I'll do the same here for the
focus pseudo style and
apply to same styling to both inputs and text areas.
With that, we've got this look
and now here we can type.
And here I can now also add line breaks.
And as you see,
it's automatically scrollable and so on.
Now we also want to give this text area a name
like user dash message
so that if we submit this:
hi, there, my message.
If I submit this,
it's all a part of the submitted data.
This now looks very strange here in the URL,
but these strange characters with the percentage signs here
are just automatically added by the browser
to kind of end code that line break
and special characters into a URL friendly format.
Not something you have to worry about right now.
The only thing that matters here
is that indeed the message we entered
will also be sent to the server
just like all the other input values.