Checkboxes ( why when they have similar name we can choose every elements)

Could somebody explain me please , why it is possible to choose 3 elements of personality if all of they have same name , why it has another rules than indoor-outdoor

<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value ="indoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value ="outdoor"> Outdoor</label><br>
<label for="loving"><input id="loving" type="checkbox" name="personality" value ="loving"> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value ="lazy"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value ="energetic"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>

<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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="https://www.freecatphotoapp.com/submit-cat-photo">
  <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value ="indoor"> Indoor</label>
  <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value ="outdoor"> Outdoor</label><br>
  <label for="loving"><input id="loving" type="checkbox" name="personality" value ="loving"> Loving</label>
  <label for="lazy"><input id="lazy" type="checkbox" name="personality" value ="lazy"> Lazy</label>
  <label for="energetic"><input id="energetic" type="checkbox" name="personality" value ="energetic"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>
  **Інформація про ваш браузер:**

Агент користувача: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36

Завдання: Використовуйте атрибут значення за допомогою радіокнопок та прапорців

Посилання на завдання:

Hello Helena.

Checkboxes are used when more than one selection is needed, meaning you can select one or more than one options or all the options with checkboxes. With Radio buttons on the other hand, only one option can be selected.

The name attribute holds the value of the checkbox input, which is passed to the server/backend for processing. The name does not always need to be the same but it helps group related things.

Please check out this article:

Good, well thought out explanation.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.