mySqli php - User input multiple choice checkboxes into 1 record

Question

beginner here. i have a nice mysqli user input going to where people fill out a form and it gets entered into my database.

For example im using

$category = $_POST['category'];

and

<input type="text" name="category" required placeholder="categories">

and its working great!

So.. i have a record which is a drop down of checkboxes, so the user can choose multiple answers. looks like this

<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
       <select>
          <option>Select an option</option>
         </select>
         <div class="overSelect"></div>
        </div>
        <div id="checkboxes">
           <label for="one"><input type="checkbox" id="one" />First checkbox</label>
           <label for="two"><input type="checkbox" id="two" />Second checkbox</label>
           <label for="three"><input type="checkbox" id="three" />Third checkbox</label>
         </div>
        </div>
       </form>

1. How do i use

   $choices = $_POST['choices'];

to connect to the multiple choices the user chooses.

2.and how do i name the form above, so i can INSERT INTO (choices) VALUES ($choices)

3. i suppose it should be inputted into my database separated by a comma, (choice1, choice2, choice3)

ADDITIONAL INFO I HAD TO USE JS AND CSS TO CREATE THE DROPDOWN CHECKBOXES.

              <style>
                      .multiselect {
                        width: 200px;
                      }
                      .selectBox {
                        position: relative;
                      }  
                      .selectBox select {
                        width: 100%;
                        font-weight: bold;
                      }
                      .overSelect {
                        position: absolute;
                        left: 0; right: 0; top: 0; bottom: 0;
                      }
                      #checkboxes {
                        display: none;
                        border: 1px #dadada solid;
                      }
                      #checkboxes label {
                        display: block;
                      }
                      #checkboxes label:hover {
                        background-color: #1e90ff;
                      }

                      </style>
                  Category:
                  <form>
                    <div class="multiselect">
                      <div class="selectBox" onclick="showCheckboxes()">
                        <select>
                          <option>Select an option</option>
                        </select>
                        <div class="overSelect"></div>
                      </div>
                      <div id="checkboxes">
                        <label for="one"><input type="checkbox" id="one" />First checkbox</label>
                        <label for="two"><input type="checkbox" id="two" />Second checkbox</label>
                        <label for="three"><input type="checkbox" id="three" />Third checkbox</label>
                      </div>
                    </div>
                  </form>

                  <script>
                    var expanded = false;
                    function showCheckboxes() {
                      var checkboxes = document.getElementById("checkboxes");
                      if (!expanded) {
                        checkboxes.style.display = "block";
                        expanded = true;
                      } else {
                        checkboxes.style.display = "none";
                        expanded = false;

                        }
                    }
                  </script>

Answer 1

The attribute "id" is only used by CSS and javascript to refer to the specific element. What you want here, is give the elements a name. like so:

<div id="checkboxes">
     <label for="one"><input type="checkbox" name="one" id="one" />First checkbox</label>
     <label for="two"><input type="checkbox" name="two" id="two" />Second checkbox</label>
    <label for="three"><input type="checkbox" name="three" id="three" />Third checkbox</label>
</div>

You can then check in your $_POST for $_POST['one'] or $_POST['two'] or $_POST['three']. They should be either missing entirely (use isset()) or should be posted as the value "on"

if (isset($_POST['one']) && $POST['one'] === "on"){
   // do stuff for checkbox one
}