Begginer Question in HTML

I’ve write in the first input with type “Radio” the id wich have the same name of lable and the value. And the second i didn’t write the id. And it was the same result, so what do id element do?!

And I did the same thing in the other type “Checkbox”, and it have succes too.

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" value="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
  <label for="outdoor"><input value="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label for="Loving"><input id="loving" value="loving" type="checkbox" name="personality"> Loving</label>
  <label for="lazy"><input value="lazy" type="checkbox" name="personality"> Lazy</label>
  <label for="energetic"><input value="energetic" 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; rv:73.0) Gecko/20100101 Firefox/73.0.

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes

Hi mohannadalnono, welcome to the FCC forum!

I think it’s easiest if you reset your code and just add a value attribute on each input with the label name in lower case. See image …

1 Like

the id element doesn’t do anything on its own, but it must be unique and can be used to target elements for styling with css or for manipulating it in some way with javascript

also, id are used in testing to identify the presence of elements (in the projects there will be many required id for you!)

in this challenge I don’t think an id is required

(an id in input element is also used to bind it to a label element, the for attribute of the label must be equal to the id of the input element. In this way clicking on the label the input is selected)

1 Like

You don’t need to specify id attribute if you nest <input> into <label>:

<label>
  <input type="checkbox" value="outdoor" name="personality">
  Outdoor
</label>

<!-- same as below -->

<input type="checkbox" value="outdoor" name="personality" id="inputId">
<label for="inputId">Outdoor</label>

Other thing you have to keep in mind, that if you want to group multiple radio buttons or checkboxes together you need to use unique name attribute per such group.

1 Like

aah, got it .
Thank you very much,