check in html code example

Example 1: html checkbox

<!--
  You can group and post different values with the same "name".
  When posted to PHP, all checked boxes' values will appear under
  the "peripherals" element in `$_POST` array.
  E.g. if we check "screen" & "keyboard" and post the form then
  `$_POST` will contain `['peripherals' => ['screen', 'keyboard']]`
-->
<form>
  <input type="checkbox" id="periph1" name="peripherals" value="screen">
  <label for="periph1"> I have a Screen</label>
  <input type="checkbox" id="periph2" name="peripherals" value="keyboard">
  <label for="periph2"> I have a Keyboard</label>
  <input type="checkbox" id="periph3" name="peripherals" value="mouse">
  <label for="periph3"> I have a Mouse</label>
  <button type="submit">Send</button>
</form>

Example 2: how to make checkbox checked in html

<input type="checkbox" checked={props.completed} /> 

#for props completed is true/false , hence if completed is false then checkbox will not be clicked .
# if the checkbox is true it will be will be checked

Example 3: html checker

<style>
#checker{
  display:flex;
  flex-direction:column;
}

.row{
  display:flex;
}
.row div{
  width:50px;
  height:50px;
  border:solid;
  border-width:1px;
}

.row1 div:nth-child(odd){
  background-color:black;
}

.row2 div:nth-child(even){
  background-color:black;
}
</style>

<div id='checker'>
  <div class='row row1'> 
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
  </div>
    <div class='row row2'> 
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
  </div>
     <div class='row row1'> 
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
  </div>
  <div class='row row2'> 
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
  </div>
    <div class='row row1'> 
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
  </div>
</div>