Okay so next up we're going to focus on labels and each HDMI forms so labels are exactly what they sound
like they let us add captions to individual elements in our form.
And the reason that we use them rather than just a paragraph or some plain text is that labels are really
important for making our site accessible.
So if someone is visually impaired or blind and they're accessing our forum trying to sign up their
screen reader software that they're using is going to look for label tags and it's going to use those
labels to know what each part of the form corresponds to.
So it's really important.
It's also a nice way just to add a little caption as you can see here explaining what each part of the
form is used for.
So there's two syntaxes we're going to cover the very first one looks like this.
Create a label tag
and then we actually put the input inside that label tag.
So you might say something like your name
and then we're just going to take this username and put and put it inside and rather than do this it's
a little bit better make things spaced out a little bit so that we see the true relationship between
things.
So we'll put password colon and then the password and put.
And there we go.
That's all we should need to do refresh the page.
We now have two labels that correspond to our two inputs.
So there is an alternate syntax rather than having your inputs nested inside of a label.
We actually can do them completely separate and we connect them in a slightly different way.
You can see here we have a label and it has a four attribute set equal to user name.
And then we have an input with an ID equal to username.
So as long as these two match screenwriter's and other accessibility software will know that this label
that is for user name is corresponding to this input with ID username.
So just to show you that I'm going to go ahead and just duplicate this commented out just so we have
it.
And then what I'm going to do is move the input tags so that they're separate from the labels.
They're no longer contained inside of that label tag.
So they're no longer nested inside of one another.
OK.
And the next thing is connecting them because right now although it will look the exact same for software
for people who are visually impaired these are not the exact same because they're not actually connected
there is no line connecting this label to this input.
So in order to do that we use the four attribute let's say for user name.
And then over here we need to say ID is user name and we'll do the same thing label for password.
And just to be clear the name does not matter.
We do want to make sure that it's nice and meaningful.
It's not just jibberish but it does not matter as long as it matches the ID
and refresh it looks exactly the same.
But you can just trust our data is now connected.
We have a label for every input