This form is really starting to take shape.
We've used input elements, we've used the select element.
I want us to now use another type of element called <textarea>...
and intuitively, you probably know what that is already.
It just allows a user to write a lot of text, you know, with the input text above, with the text
input fields...
the user only really has one line. But with a <textarea>, of course, they can write a lot more information.
So let's build that quickly, and then let's style it up. First
step always, is we have to code our HTML.
And again, let's start...
adding labels to our form. It is always good practice.
Adding a textarea to our form.
And how do we create a textarea? Remember, each widget should have a wrapper, it's just good practice
when it comes to styling...
it's a lot, lot easier.
So let's wrap it in a DIV, with the class of form-row, just to keep it consistent with everything else.
That's the first step.
After that, I want us to add a label.
It's always good to label each widget.
And then, of course, I want to use this textarea element, and then we can even include kind of a
short description, another short description of what we want the user to do.
And that we can just wrap within anything...
let's just wrap it in a DIV.
So let's get coding 👩‍💻.
As I mentioned, the first thing I want to do is create a DIV with form-row as its class, just to keep
it consistent with everything else.
Then, as I mentioned, let's give it a label and this is just going to be a "description" of the user...
Your profile...
description.
Then, I want to add this textarea HTML element. I want to give it a name of "description". (swoosh) And i just...
want to remind you again, don't get lost in all the detail. This "name" attributes is necessary when we
submit the information to a server, because remember, everything sent to the server needs to be associated
with a variable, a name.
And that's why we're giving these names, names, descriptions.
So when we send the information to the server, we can extract values from the form.
That's all we doing with this "name" attribute.
Makes sense.
Um, the ID we can give anything we want. In fact, let's just give it an ID of description.
We don't have to worry about columns and rows for now.
You can just define how big you want your textarea to be. And then remember, I wanted another short...
description about this whole textbox.
So let's wrap that in a DIV, and let's just give it a class of...
"description". And I'm just going to put here, describe yourself...
here - your hobbies and interests.
And if we save this and we go to our browser...
there we go.
It looks pretty ugly 🤢...
I know. The cool thing with textboxes is that its got this little thing at the bottom right...
here.
And of course, the user can drag and make that bigger or smaller. If you refresh, it just defaults to the
standard size.
So now I want us to style this.
How should we do that?
Firstly, let's go to our IDE here...
let's go to the stylesheet.
Let's copy/paste this heading.
We don't to style radio buttons, it's not dropdown menu styling...
now, I want to go text...
textarea styling.
In order to style this textbox, we obviously have to target it in some way. And that's super, super...
easy.
We start with the parent again, which is "form-row". Remember, if we go to our HTML...
it's that DIV with class of "form-row'.
And then within that, we have a descendant element called textarea. It really, really is that simple.
The first thing we can change is say, the font-family.
And we can have that as, um, Helvitica ... Helvetica.
And if that is not on the browser, we can get Arial, and then sans-serif as a default option.
So there we go...
we've just changed font-family.
The next thing we can do, is we can change the font-size. Let's change that to 14px...
and what I want to do, is I want to put the text editor to the left and the screen to the right...
and then you can see as we go on what the changes are that we make.
So the next thing we can do, is let's add a border. Um, so border, we can give it a 1px solid...
border...
#D6D9DC...
how does that look? Very very subtle.
But it's all these subtle things that make your site really stand out.
The other thing I want to do is I don't want those square borders on the textarea...
so let's just change the border-radius.
And remember, we defined border-radius as a CSS variable.
There we go, so it's slightly curved now.
Let me just zoom in a little bit so you can kind of see what we're doing. Um, and then, let's change the minimum
height...
it's just a bit too narrow at the moment.
Yep, that's better.
Um, let's affect the margin-bottom...
and again, we defined that in a variable. This is exactly why we have variables, by the way. It just...
makes our life so, so much easier. Padding...
let's give it 10px of padding.
Um, and then the width.
You know it, we've already defined the width...
in a variable called --widget-width.
(sound effect: Congratulations)
So there we go...
if we look at this, its taking shape. How nice does that look 😍?
Right, everything starts fitting in, it looks like it's a form that's designed to be together.
The one thing that isn't looking good now is this...
"Describe yourself here - your hobbies and interests". That DIV isn't quite right...
so let's go to our coding editor here...
again, let's target the parent class. Within that...
we gave that DIV a class of "description", didn't we?
Firstly, let's change its color...
font-size, let's give it 14px...
margin-bottom...
we put it in a variable called --margin-bottom.
And let's also push it to the right a bit...
let's give it a margin-left...
of --label-width.
Save that...
go to our browser, and look how cool that is 😎. It just fits in. It's subtle.
It's awesome 🤩.
It's spazzy 🌟. Man, it's looking good! So, I hope you understand what it is we've done.
Sorry that I'm going quite quick, but I think you're getting the feel for now...
how CSS works.
This textarea element is quite simple...
we're going to be talking more about it in this course, later.
But for now, you can already start seeing our form is falling into place. But, we're not quite done with...
our form yet, are we?
So, in the next lecture, let's continue.