freeCodeCamp Challenge Guide: Use the value attribute with Radio Buttons and Checkboxes

Use the value attribute with Radio Buttons and Checkboxes


Problem Explanation

To pass the challenge, add the value attribute to the input elements of type checkbox and radio. Use the input label text, in lowercase, as the value for the attribute. The value attribute will make sure the choices are identifiable when the form is submitted.

Example form with value attributes:

<form action="/submit-sandwich">

  <label><input type="radio" name="bread" value="wheat"> Wheat</label>
  <label><input type="radio" name="bread" value="ciabatta"> Ciabatta</label><br>

  <label><input type="checkbox" name="fillings" value="chicken"> Chicken</label>
  <label><input type="checkbox" name="fillings" value="tuna"> Tuna</label>
  <label><input type="checkbox" name="fillings" value="mayo"> Mayo</label><br>

  <textarea placeholder="Allergies, and extra information"></textarea><br>

  <button type="submit">Order Sandwich</button>
</form>

Solution (click to show/hide)
<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 id="indoor" value="indoor" type="radio" name="indoor-outdoor"> Indoor</label>

  <label><input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>

  <label><input type="checkbox" name="personality" value="loving"> Loving </label>

  <label><input type="checkbox" name="personality" value="lazy"> Lazy</label>

  <label><input type="checkbox" value="energetic" name="personality" > Energetic </label><br>

  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>
24 Likes