FAQ: Learn HTML: Forms - Adding a Label

This community-built FAQ covers the “Adding a Label” exercise from the lesson “Learn HTML: Forms”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Introduction to HTML

FAQs on the exercise Adding a Label

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2 posts were split to a new topic: What happened to the POST method?

4 posts were split to a new topic: Where do meal and food come from in the example?

2 posts were split to a new topic: It doesn’t highlight when I click label?

3 posts were split to a new topic: What is an SVG?

17 posts were split to a new topic: Do we need both name and id? Can they be the same thing?

2 posts were split to a new topic: Is a for attribute mandatory?

3 posts were split to a new topic: What is the difference between a label tag and a caption tag?

4 posts were split to a new topic: What does it mean by clicking the label?

3 posts were split to a new topic: What does it mean to put something within an element?

Why would we want to make a label rather than just put regular text around the input? It seems like it would be the same. Do we do anything with the label?

For example, why is

label

better than

no label

?

From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Label

Associating a <label> with an <input> element offers some major advantages:

  • The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screenreader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
  • You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.

You wouldn’t benefit from all this using <p>Username</p>, for example.

4 Likes

is label like a semantically correct version for p in the context of declaring what the 's purpose is?

doesn’t @ghostlovescore answer cover your question?

Why do I have to assign the label to input if the label acts just like a heading? You see if i remove for="" it doesn’t make a difference the text inside still acts the same.

The for associates the label with the input field. This is needed for accessibility tools. So that your website can also by used by people who have poor(er) vision and things like that.

It depends how the label element is used. If it wraps the input control, it doesn’t need for since the control is a child element. If it appears before (or after) the input control then it does need for to declare the association.

<label for="name">Name: </label>
<input id="name">

Run that in your browser. Mouse over the label and click. Notice anything? We’ve given focus to the input control just by clicking the label. This is a huge boost for usability and accessibility.

I’ve seen this being done instead:

<label>Username<input type="text" name="username" id="username"></label>

It seems to work fine. Is it somehow incorrect or risky to do it this way?

Not at all. It is perfectly valid to wrap the input control with the label. If there is no need for the id attribute it can be removed, as can the type attribute since the default is text. The name attribute is all that is needed.

So much more concise, love it!

<label>Username: <input name="username"></label>
1 Like