HTML ???? ???? ?? ??? ???? ???? <input> ??? ??????. 1. ?? ???? ID, ?? ? ??? ??? ?????? ???? ???? ??? ?? ? ? ????. 2. ?? ?? ???? ??? ????? ?? ?? ???? ?? ??? ???? ???? ??????. 3. ???? ??? ?? ? ? ?? ???? ??? CSS? ???? ?? ??? ????? ?? ??? ?????. 4. ???? ????, ???? ?????, ??? ?????? ????, ??? ?????? ???? ????. ?? ??? ???? ??? ? ??? ?? ?? ?? ?? ?? ??? ???? ???? ? ??? ? ? ????.

html? ???? <input> ??? ???? "checkbox" ? ??? type ??? ???? ?????. ??? ???? ???? ?? ??? ??? ??? ??? ??? ?????. ??? ???? ???? ??? ???? ? ????? ?????? ? ?? ????.

HTML ???? ?? ??

?? ??? ???? ??? ????.

 <input type = "checkbox"id = "?? 1"name = "?? 1">
<label for = "?? 1"> ?? 1 </label>

• type="checkbox" ? ????? ?????? ?????.
• id ? for (??? ??)? ????? ???? ???? ???? ?????.
• ??? ???? ?? name ??? ?????. ?? ??? ???? ?? ? ? ?????.

<form> ?? ?? ??? ??? ??? ?? ?? ?? ? ? ????.

?? ???? ????? ??

??? ?? ?? ?? ??? ?? ?? ?? ?????? ?? ???? ?????? (????? <div> ?? <fieldset> :

 <fieldset>
  <Legend> ???? ??? ?????? : </legend>
  <input type = "checkbox"id = "red"name = "color"value = "red">
  <label for = "red"> red </label> <br>

  <?? ?? = "checkbox"id = "blue"name = "color"value = "blue">
  <label for = "blue"> blue </label> <br>

  <?? ?? = "checkbox"id = "green"name = "color"value = "green">
  <label for = "green"> Green </label>
</fieldset>

? ?? ?? :

• ??? name ??? ???? ?? ??? ???? ????. ? ???? ??? ??????? ?????.
• ?? value ??? ???? ?? ? ?? ? ??? ????? ? ? ????.
• <legend> ???? <fieldset> ? ?? ???? ???? ???? ?????.

???? ? ?? ???

????? ???? ?? ???? ????? ?? ????. ??? ???? ???? ??? ??? ????.

• ?? ???? CSS? ????? ( opacity: 0 ?? display: none )
• <span> ?? <div> ? ?? ?? ??? ???? ??? ?? ???? ????.
• label ???? ?? ???? ?? ??? ?????? for

?:

 <label class = "Custom-Checkbox">
  <input type = "checkbox"name = "custom">
  <span class = "checkmark"> </span>
  ??? ?? ???? ???
</???>

?? CSS? ?? :

 .Custom-Checkbox {
  ?? : ??;
  ?? ?? : 25px;
  ?? : ???;
}

.Custom-Checkbox ?? {
  ?? : ??;
  ???? : 0;
  ?? : 0;
  ?? : 0;
}

.checkmark {
  ?? : ??;
  ?? : 0;
  ?? : 0;
  ?? : 18px;
  ?? : 18px;
  ??? : #eee;
  ?? : 1px Solid #CCC;
}

/ * ?? ? ??? ?? ??? ?? */
.Custom-Checkbox Input : Checked ~ .checkmark :: ?? {
  ???: "";
  ?? : ??;
  ?? : 6px;
  ?? : 3px;
  ?? : 5px;
  ?? : 10px;
  ?? : ??? ?? ?;
  ??? : 0 2px 2px 0;
  ?? : ?? (45deg);
}

?? ?? ??? ??? ????? ??? ??? ?? ? ? ????.

??? ?

• for ? id ???? ???? ?? ???? ?? ???????
• ??? ???? ???? ???? - ??? ??? ??? ??? ?????.
• ???? ?? ??? ??? ??? ???? ?? ??? ????.
• ? ???? ????? ??? ??? ????? ??????.

????? HTML?? ???? ???? ???? ?????. ???? ???, ?? ???? ???? ??????? ???? ? ? ?? ?? ?? ??? ????.

? ??? element? ???? HTML?? ???? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!