How to implement an MDL data-selectable table inside a form

I have an MDL selectable table:

<form action="/counselors//badges/add" method="post">
  <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
    <thead>
      <tr>
        <th class="mdl-data-table__cell--non-numeric">Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="mdl-data-table__cell--non-numeric"></td>
      </tr>
    </tbody>
  </table>
<!-- submit button, etc -->
</form>

The table has checkboxes but in. However, the mdl-data-table--selectable class is what adds the checkboxes. How can i use these checkboxes as inputs for my form? there just needs to be a checkbox for each row in the table.