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>