Tell us what’s happening:
i need help on checkboxes
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" type="radio" name="indoor-outdoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
<label for="loving"><inpit id="loving" type="checkbox" name="personality"> Loving</label>
<label for="kind"><inpit id="Kind" type="checkbox" name="personality"> kind</label>
<label for="loving"><inpit id="loving" type="checkbox" name="personality"> Loving</label>
</main>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes
Some inputs are radio buttons like:
<input id="indoor" type="radio" name="indoor-outdoor">
And some are checkbox buttons like:
<input id="indoor" type="checkbox" name="indoor-outdoor">
Note the type
.
1 Like
it still doesnt work im new so i dont really get it
current code for check boxes
<label for="loving"><inpit id="loving" type="checkbox" name="personality"> Loving</label>
<label for="kind"><inpit id="Kind" type="checkbox" name="personality"> kind</label>
<label for="loving"><inpit id="loving" type="checkbox" name="personality"> Loving</labelc
It’s okay comrade, we all are here to help each other.
Just check the sample challenge provided as example
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
It’s easy, it’s a label
that contains an input
of type
checkbox
Note: if input elements make you confused, this is better you review previous lessons again
Now check what challenge needs you, it wants you code three checkbox, just like the one it provided as sample.
Find the form
tag in the code, and place three checkbox input and its label just like the sample provided.
Feel free to ask any other question comrade
1 Like
thank you. im new so this is a big help
so i have a question. this is the code currently
<form>
<label for="mean"><inpit id="mean" type="checkbox" name="personality"> mean</label>
<label for="quiet"><input id="quiet" type="checkbox" name="personality"> quiet</label>
<label for="Kind"><input id="kind" type="checkbox" name="personality"> kind</label>
</form>
there are check boxes for the two last ones but for the first one it doesnt show
You may please select the code you pasted to reply here, and ctrl + shift + C
will format it, so we could see it easier. Thanks.
You may edit your answer now please and select the code block and the key mention. Thanks.
One very small typo issue dear, your first input
is inpit
, fix and I think it pass
thank you everyone that helped me you guys are truly the best
Hey Aiden, the simplest form of creating checkbox is given below.
<div class="your-custom-class">
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div class="your-custom-class">
<input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
<label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>
Now, you may want to style your checkboxes a bit. To add some style into your checkboxes, you need to use some CSS. You may take a look at the code below.
.checkbox-custom {
display: none;
}
.checkbox-custom-label {
display: inline-block;
position: relative;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
content: '';
background: #fff;
border-radius: 0px;
border: 2px solid #82F60F;
display: inline-block;
vertical-align: middle;
width: 15px; height: 15px;
padding: 2px; margin-right: 10px;
}
.checkbox-custom:checked + .checkbox-custom-label:after {
content: "";
padding: 2px;
position: absolute;
width: 2px;
height: 15px;
border: solid #82F60F;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
top: 2px; left: 5px;
}
For better understanding, you can read this article on How To Create Checkbox And Radio Buttons In HTML/CSS which I found very helpful.