Now what could be missing in this form here?
Well, if we have a look at it,
we have no idea which kind of value
should be entered here.
In the last lectures,
I sometimes entered a name here.
I sometimes entered anything.
And if we have a look at the code,
the HTML code,
we see that we assigned a name
an identifier of username
for this input.
But that of course,
that's just something we
as a developer see.
If I'm a visitor of this webpage,
I don't see that.
And our visitors typically don't inspect
that content here with the Deftools.
So we wanna give our visitors a hint
about which kind of data should be entered here.
What we're expecting as a value here.
And for this,
we can add labels.
We can add labels with another special HTML element
and that would be the Label element,
which also has an opening and closing tag.
And between those tags
you have your label text.
So here, if we want the name of a user
we could say Your name as a label.
And if I save that,
now that shows up above that input.
And that of course is a very useful hint
which we typically wanna give to our users.
However, from an accessibility perspective,
we're not 100% there yet.
This is visible to visitors of our website.
And it's pretty clear here
that this label refers to this input.
Now, if we had a form with multiple inputs,
it still probably would be obvious
which label belongs to which input
if we just have a look at the page.
But if a blind user, for example,
is visiting this page,
it might not always be clear
which label belongs to which input.
And that's why you can also give your label
the special for attribute.
with the for attribute,
you kind of connect this label to an input.
And to connect it,
you need to give your input an ID.
Now we do have this name identifier
but this only matters for the form submission.
We need an ID attribute
with any value of our choice
to connect a label to that input.
And here we could set ID to username as well,
but you can also use a different identifier here.
You don't have to repeat what you chose for a name.
Here I'll use the same value though
and then here for,
for,
I'll also enter username.
But I'll actually write it without a dash
to make it obvious that this belongs to this ID
and not to this name,
but you could use exactly the same values as well.
Now with that,
visually nothing changes
but for Assistive Technologies
there now is a connection.
And there also is a nice difference for our regular users
who don't use Assistive Technologies as well.
If you now click on that label,
you'll notice that this input is focused.
I did not click into the input,
and yet if I click on that label,
it is focused and I can start typing here.
Now this was not the case without the for attribute.
If we removed this temporarily,
if I click on the label nothing happens.
I can hammer this label and nothing happens.
And that's another neat feature
which you get when you use the for attribute.
By establishing this connection
it is enough if a user clicks that label
to focus that input,
which is a nice little extra.
And now with that,
we got our first input into this first form finished.
Now I wanna come back to some styling
and some special things you should be aware of
when it comes to styling input elements
and Form elements
and then thereafter,
we're going to explore other form elements as well.