Confusion in task pages

HTML-CSS
1

Tell us what’s happening:
The task before asked me to put for="" and id=""

I have done so, but on the next task, when dealing with value=""
the for="" and id="" disappeared from the code and was not requested at any point on that page.
However, it was again present on the next page.
I am confused by it because like this, it looks like I do not need for="" and id="" at all / but I know it should to be there.

edit: Thank you for answering my question Pedro
For anyone stumbling upon similar problem.

tl;dr: It should be there when you will code, but for the sake of the task about value="" it was not necessary at that challenge.

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><input type="radio" name="indoor-outdoor"> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality"> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

Your browser information:

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

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:

2 Likes
2

the attributes for=“” (in label) and id=“” (in input) are only needed together if you want the form tag to know what element is the label for. This helps a lot if using an input type file for example;

I searched and found this important things for you to know on stack overflow:

Browser semantics* refer to how a browser will identify a DOM node and what the browser will read to users who use assistive navigation.

The [id] attributes do not add to semantics. It’s important to still use descriptive IDs where possible, but only insofar as to make development easier.

It tells the label which <input> (or <select> or <textarea> …) the label is labeling, and also provides some UI features such as moving focus to the relevant input when the label is clicked, tapped, or otherwise triggered.

When a labelled element is focused, browsers will know to tell the screen reader to read the label associated with the element.

So to conclude:

you don’t need them for this challenge you are linking, because it’s tested against input value and not input-label relationship.

3

Thank you so much!
I was very confused why that happened . It does make sense if it is for the sake of the value challenge. I just tho I am missing something.
I am grateful for the additional information :slight_smile:

4

when you see stuff appear and disappear in challenges… some challenges are added later, some challenges change order in time, etc so the original order is lost
and also the building of one challenge over the others is lost

2 Likes
5

Thank you.
It is all clear to me now :slight_smile:

1 Like
6

yep its because not all challenges are linked to each other. every challenge has its own lesson to teach. So, you just take seperate notes of what you think is worth making notes and this interactive coding curriculum is just to give you a broad idea of the application of this language. For advance knowledge please refer to some other source.
you can get the information about sources in news section.
btw im also new and i just reached the applied visual design part of responsive web designing certification.
hope we collaborate sometime in future for our projects mate :wink: