Tell us what’s happening:
**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://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>
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36
Challenge: Check Radio Buttons and Checkboxes by Default
Link to the challenge:
No sé donde en donde poner checked para los botones de opción y las casillas de verificación de forma predeterminada
You add it in with the other attributes.
If I start with this:
<input type="radio" name="test-name">
and I want to add the checked flag:
<input type="radio" name="test-name" checked>
I could also do:
<input checked type="radio" name="test-name">
or some other combination.
You don’t need to assign it a value in this case, just put “checked” as one of the attributes.
Does that makes sense?
si, tiene sentido pero no lo coloco en el lugar que es ya intenté ponerlo en tres lugares y nada
lo he puesto donde sugeriste al lado de radio y nada y también como atributo de input
Show us the code that you think is correct but is failing. We can’t help you if we don’t know what you’ve tried.
<input id="indoor"type=“radio” name=“indoor-outdoor” value=“indoor” checked> Indoor
es la parte del código donde se presenta el problema
Next time, please provide all the code. A small change somewhere else could cause other code to fail.
In any case, if I add that line in where I think it goes in the code, the first test now passes. You did the right thing. Now you need to fulfill the other one:
Your first checkbox on your form should be checked by default.
You fixed it for the radio buttons, not do it for the check boxes.
<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" checked> 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>
si,ese es el inconveniente ahora
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (’).
OK, so now we can see the problem completely.
You solved the first “checked” problem.
But you still have a failing test:
Your first checkbox on your form should be checked by default.
When I look at your first checkbox, I see:
<input id="loving" type="checkbox" name="personality" value="loving">
I don’t see a “checked” attribute in there. You need to add one, just like you did for the “Indoor” radio button. When I add one, all the tests pass.
Muchas gracias, ya funcionó, pero por qué tenia que poner dos atributos?
Why do we need two different “checked” attributes?
First of all, the lists would work just fine without a “checked” attribute - it just allows one to be preselected, a default.
But we have this:
This has two lists. The first one is indoor and outdoor. Those are radio buttons, meaning only one can be selected at a time.
The second list is loving, lazy, energetic. Those are checkboxes so more than one can be selected.
The purpose of the challenge is to learn how to use the “checked” attribute to create a preselected default for a list. There are two lists so you are doing it in two places. (In the real world, you could have only one with a “checked” attribute or none - depending on what you want.)
De nuevo muchas gracias, por la ayuda y su paciencia.
1 Like
system
June 8, 2022, 5:35am
16
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
