create 6 checkboxes in html

Question

How can I create 6 checkboxes that will look like this? I know how to hide the check box, but how can I make is so I can click the text?

<tr>
<td class = "first">Select Folder(s)</td>
<td class = "second">
<input id="hw" type="checkbox">hw1
  <input id="hw" type="checkbox">hw2
     <input id="hw" type="checkbox">hw3
        <input id="hw" type="checkbox">hw4
           <input id="hw" type="checkbox">hw5
              <input id="hw" type="checkbox">hw6
</td>

It should be like this:

Select Foler | (hw1) (hw2) .....

and the hw checkboxes should be clickable, and I need to be able to select more than one.

Answer 1

I think you want the <label> HTML tag. You specify the <label then for=" then the id of the element that you want to attach it to (a radio or checkbox). In the end, it should look something like this:

<label for="hw">text that they can click on goes here</label>

As stated by @tieTYT in the comments, an alternative way to do this would be to wrap the <label> tag around the radio or checkbox element like this:

<label><input type="radio"/>Text for the label here</label>

Note: You may still need to add the for= attribute for old and buggy IE browsers.

Here's your final code (I added the CSS property cursor:pointer; to the <label>s):

label {
  cursor: pointer;
}
input[type=checkbox] {
  cursor: pointer;
}

<tr>
  <td class="first">Select Folder(s)</td>
  <td class="second">
    <input id="hw" type="checkbox">
    <label for="hw">hw1</label>
    <input id="hw2" type="checkbox">
    <label for="hw2">hw2</label>
    <input id="hw3" type="checkbox">
    <label for="hw3">hw3</label>
    <input id="hw4" type="checkbox">
    <label for="hw4">hw4</label>
    <input id="hw5" type="checkbox">
    <label for="hw5">hw5</label>
    <input id="hw6" type="checkbox">
    <label for="hw6">hw6</label>
  </td>

Hope that helps!