All right, so this is exactly where we left off in the previous lecture - we created that Personal
Profile heading.
But now I want to add our very first form widget 😲.
I want us to add an input box.
We use this because we want to start collecting data from a user, and that's why we're using this <input>
element.
So how does that work?
Well, let me ask you this,
how do we create a form?
Do you remember?
That's right, we start by creating this <form> element.
And for now, I don't even need an "action",
I don't even need a "method". But maybe what we should do is add a class, because you and I both know we're
going to style this, otherwise it's going to look terrible 🤢.
So let's just call this profile-form.
Remember, we've got the profile-header.
So now I've just called this class profile-form.
So there we go.
But remember, it does nothing visually, this <form> is just a wrapper element.
The first thing I want to do, is I want us to have a container in our form, call it a container for
different sections.
So this <div> here, let's give it a class of 'form-row'.
And why do we have this wrapper 🤷‍♀️?
Well, it's just it makes it easier for us to style.
It's pretty common for separating input elements to have a wrapper.
And here we've just put it in a <div> with a class of 'form-row'.
The next thing I want to include, is I want to have a label here.
And as we'll see later on in this course, label elements have this "for" attribute, and this has to
be equal to the ID of the input element below.
I know that's a bit of a mouthful.
I'll show you what I mean in a second.
For now, let's just say that the "for" attribute should be assigned the value of "name".
And of course, let's give our input an actual label called Name, because we want the user to insert
their ... name.
It's very logical. Next, let's include this infamous <input> text box of type text.
And the ID here is crucial, it is very, very important.
This ID has to be equal, or it has to be the same, as that "for" attribute in the label.
And we can save this, and look at our screen, we've literally got a Name, that's the label, and that's
our actual input text box.
How cool is that?
So you can kind of think of the label as another semantic HTML element like <article> or <figcaption>,
but just remember the label's "for" attribute must match the ID attribute of its associated <input> element.
And FYI, let me just ask you this, why don't we just do this, why do we actually have to have that
label?
Because I could put Name
here, and it looks exactly the same, doesn't it?
Why do we need the label?
Well, we're going to get into a lot more detail later.
But the first thing I can immediately notice from a UI point of view, is that without the label, you
can't just click on the Name and select the input box.
What do I mean?
Well, let me click on the Name right now, on our webpage, can you see that our input text box does
not get activated.
But, let me delete this now.
Let me un-comment our label.
And now let me click on Name ...
(sad trombone sound)
Wwhy is this not working?
Oh, sorry,
the ID should be "name", not "names". But here we go,
and if I click on Name now, the input itself gets focus.
(sound effect: congratulations)
That is so much better
UI, you got to agree with me on that one?
Whew, I know I'm going slow, but this is such an important concept that you need to understand.
And looking at the code right now, just know that we used an input of the type "text".
This input element is so, so powerful, in fact, it's so different from other elements in HTML because
it can dramatically change appearance depending on its type attribute. But it always creates some kind
of interactive user input.
But hang onto your horses 🐎.
I don't want us to move on just yet, I want us to understand this input element in a little bit more
detail.
So let me just discuss that first, and then we can continue on with our code.