Help please. i dont know how to create checkboxes

HTML-CSS
1

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

2

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
3

it still doesnt work im new so i dont really get it

4

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
5

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
6

thank you. im new so this is a big help

7

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

8

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.

10

One very small typo issue dear, your first input is inpit, fix and I think it pass

11

thank you everyone that helped me you guys are truly the best

12

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.