Before we move on, I want to just mention this label tag in a little bit more detail because you might
be thinking, what is the point of using this label tag?
Well, let's get into it.
What does the label element do?
Well, firstly, it's used to add a caption for a form control, but it does not visually render anything
special on the screen, does it?
Let me show you.
Firstly, let's look at the visual appearance of the label.
First step is I want to set up a very simple HTML file and we don't even need a head.
We're going to be very, very simple here. And here,
let's have no label.
Okay, That's the starting point.
Let's have an input type of, I don't know, checkbox.
It doesn't really matter.
We don't need a name, we don't need an ID. And let's just say here, "Are you ready to enter this cool
application?"
That's all I want to do, let's save that.
Go to the browser and there we go.
Very, very simple.
Let's just create a line break.
Now let's add a label.
And here we are.
Let's just have a label,
call-it, for welcome.
And I don't know let's do input [with type] also checkbox.
We don't need a name and the ID can be welcome.
We actually didn't even have to do this, by the way, as you'll see shortly.
And then our description can be: "Are you ready to enter this [cool] application?"
And can you see on the browser, can you see anything different visually?
No. And that's my point, right?
It does nothing visually, but you'll notice when we have no label and I click the text, nothing happens.
But if I click the text on the one with the label, it gets selected.
How awesome.
So we can see whether we have a label or not
visually doesn't make a difference.
It only comes down to the UI experience of a user.
It just makes the user's life easier to select
whichever input control you're using, or whichever form control you're using.
And there's nothing special about the label element.
It's just another HTML element - it's just markup.
Okay
Clyde, well then how do we use this label element?
In order to use the label, we have to attach it to a form control.
We have to link it up to a form control, right?
And there are two main ways we can do this.
The first way is that we can attach it implicitly.
What 😕?
What does that mean?
All right.
Well, let me show you.
How does this implicit approach work?
Well, it is very, very easy.
All we need to do is define our label tag.
We don't even need a for attribute.
How cool is that?
Now, what we do is we wrap our widget within the label tags itself.
So here we can have input of type password,
for example.
We don't need a name, we don't even need an ID, let's just say password.
Password, please.
Save that, and here it is on our browser.
But now if you click the actual text, if the user clicks on the text itself,
the actual input gets highlighted and focused.
Have you got it?
So that's the implicit approach.
We don't even need to use any attributes on the label in order for it to work.
We just wrap our entire control within the label itself.
Okay, great.
So we've seen that we can apply it implicitly, aka we just wrap our input within the middle of the
label, inside of the label tag.
That's the first way.
The most common way, however, is to do it explicitly.
And when we use it explicitly, we have to use the "for" attribute on the label element.
And what does the for attribute do?
Well, it determines the input to which it is associated.
And we've already seen a lot of examples that the for attribute value must match the ID, NOT the name,
that's important, the ID of the input element.
Right.
And we've seen examples of this during the course.
Just note that when we submit a form, we have to pay special attention to the name attributes of each
control.
But when we deal with label pairing, we rely on the ID, and this is often why you'll see in code input
elements having the same value in both attributes - in the ID attribute and the name attribute.
Because the name attribute deals with form submission, the ID often links it up to a label control ...
and CSS by the way. Is that making sense?
So we can use the implicit or the explicit approach.
We've seen an example of the implicit, but let's just quickly go back to the text editor and I want
to show you an example of us using an explicit approach.
We've already done this tons of times, so it's going to be very, very quick.
We've seen the implicit approach.
How does the explicit approach work?
Well, that's pretty much what we've done in all the examples thus far, right?
So what we do is we don't wrap the input within the label.
What we do, is that input comes outside of the label.
But if we do that, what's going to happen?
Well, that's right.
There's no association.
So if the user clicks on the actual text itself, nothing happens.
The actual input box itself doesn't get selected.
So you need a way to kind of link the two.
And the way you do this is very, very easy.
We actually normally put the label text within the label tags.
Just like this.
That's what we normally do.
It doesn't visually do anything different.
You can just see here on the screen, nothing has changed.
Again, if you click on password, nothing happens because we haven't associated the input type with
the label.
And in order to do so, it is so, so easy.
All we do is we give this a "for" attribute and let's call it password, right?
Because we're dealing with a password.
Again, this does nothing on its own.
What we have to do is tell it that it relates to which widget.
And we do that by having an ID on the input that matches the value of that "for" attribute, which we
defined as password.
And if we do this, if the user clicks the word password, yeah, boom 💥, there we go.
The input widget now gets focus.
I told you that would be very, very quick.
Okay, so that's the label element.
What benefits does it give us?
Well, the most obvious one is that it improves user experience.
If the user clicks on the text within the label element, it toggles the form control itself.
And remember, in order for this to work, the "for" attribute of the label tag should equal the ID attribute
of the related form element in order to bind them together.
Right.
That's the most obvious benefit.
But there are others.
The second main benefit to using labels is that it's good for semantic reasons.
In other words, so you and others can understand your code.
If you have some text that represents a label for an input, you can wrap it in label tags, not for
presentation, but because it's what it is.
In other words, without having a label tag that text or control is almost meaningless.
So with the label tag included and its "for" attribute, you are basically providing meaning and structure
and you're forming a relationship between your markup that can better be understood by computers, parsers
browsers and of course people.
That's the second reason why it's good to have the label element.
The third reason is that it helps visually challenged users.
As you know, visually challenged users often use screen readers that read the associated label tag
whenever a form control is used or focused. By simply including a bunch of text next to form elements,
the screen reader will read the form as simply a bunch of items like input box name, input box email,
input box location ...
but when you use a label tag, the screen reader knows which text is associated with which form element
and it will read each label with its proper form element accordingly.
It just makes the experience better.
That's what I'm trying to say.
And that concludes this awesome, awesome lecture.
Well done.
Pop open that wine bottle 🍷, champagne bottle,
or in my case, another cup of coffee ... and I'll see you in the next lecture.