Create a Set of Checkboxes Explanation

HTML-CSS
1

Tell us what’s happening:

Hello everybody. So I read a lot of websites exactly explaining the different terms of
" < label for=“loving”>< input id=“loving” type=“checkbox” name=“personality”> Loving</ label> "
and I really still don’t understand. Like why do we have to have a label, input ID and name? Why can’t we just have the type and that’s it? Sorry for the dumb question but I am new in the community. Thanks in advanced

Your code so far


<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>
  
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>

    <label for="loving"><input id="loving" type="checkbox"        name="personality"> Loving</label>
    <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
    <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
  </form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.96 Safari/537.36.

Link to the challenge:
https ://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes

1 Like
2

You can get by only inputs but label is there to give description to an input field.

You might cross an empty input field and wonder what that is for and this is where labels with texts come in rescue.

Input ids and names are there to hook up input and labels together. For example if you are working with a checkbox, if labels are hooked up with corresponding inputs via id and name, you can click on label texts and it will be as if you are clicking on checkbox input itself.

Hope this helped clear your question :slight_smile:

1 Like
3

Does that mean that you don’t need a “name” attribute in the code? Like, what are the drawbacks of not using “name”?

Because I now understand why the label is used, but isn’t the name the same as the label?

Thanks

4

It isn’t the same!

The name is the description of the input while the label is just to recognize the input easily (if you don’t put this, it will work). If you don’t put the “name” also, it will work though.

But here is the reason while we put “name”.

Let say you have a form like this:

<label for ="user"><input type="text" id="user" name="username" placeholder="Enter your username" required></label>

If you add submit button, and people fill the form something will display in their browser like “username=what the person type”. and send the information to your action page linked in the <form>. You will have created something for “name” tag so it will be like; username = Malik etc.

So the name is used for description, do you get it now?

1 Like
5

Oh ok: So the name directly has to describe what the input will be as it will describing it when the input is sent to the link I want all the data to go to?

On the other side, the label is just used to group multiple codes together?

I think i’m starting to understand, thank you!

6

Yes, exactly. You’re a smart person anyways. I have been thinking of showing you on screenshot, I didn’t explain in-depth but you got it already.

1 Like
7

@TheSilentWaiter

I want to add something to this conversation. Not just for you to consider, but also for all the other new coders reading this.
Your questions isn’t dumb, it’s an important question!

There is more to the “label thing” and other code like that than just things like grouping stuff or describing it.

Not all visitors of a website are able to see. They might use a screenreader, like Voice Over on the Mac. And those screenreaders need all that information in the background of html to help them figure out what part of a page they are on, what the layout of the whole thing is, etc.

That way the blind visitor gets not only an accurate description of the form, login, or whatever. It also saves them some time. And believe me, scanning a webpage with a screenreader takes a lot of time. Even if the blind visitor puts it on a very fast reading speed, must faster that you and I are ever able to understand.

Without the right information they could get lost, or worse, they might not be able to fill in a form, or log in or buy something.

It’s for reasons like this, that there are guidelines for accessibility. Look them up on Google if you want to know more.

In some countries it is against the law to build websites that are not accessible. In other countries not every website has to be accessible, but you might still get in trouble if a customer, member, student, citizen or whatever type of visitor finds the doors of your website closed for disabled people.

All over the world the front-end communities are starting to consider accessibility as good practice.

https://www.smashingmagazine.com/category/accessibility

And last, but not least, Google, Bing, DuckDuckGo and all other search engines are BLIND! They use the same code as the screenreader does to find their way through your website.

1 Like