Entire row of the form clickable

Question

I have this form:

Which is coded this way:

{% for answer in answers %}
    <tr>
       <td>
          <label>
              <input type="radio" name="guess" value="{{ answer.id }}" class="form-radio">
              {{ answer.content }}
          </label>
       </td>
    </tr>
{% endfor %}

But, this way, the user can only clicks on the radio button to answer the question. But, I want to have all the row of the answer clickable. How can I change this code to have the entire row clickable?

Answer 1

You should alter your html to something like this

  <tr>
    <td>
      <input type="radio" name="guess" id="guess_{{ answer.id }}" value="{{ answer.id }}" class="form-radio">
      <label for="guess_{{ answer.id}}">{{ answer.content }}</label>
    </td>
  </tr>

Sample html here

Answer 2

Most browsers will toggle your radio button selection on either

1. Clicking the radio/checkbox widget
2. Clicking the label element itself.

You could easily make the entire 'row' clickable by modifying the CSS for your label to be 100% width, and displayed as 'inline-block'

label {
    /* whatever other styling you have applied */
    width: 100%;
    display: inline-block;
}

As a side note: It is generally considered bad practice to drop your form data inside a table just for formatting. I would recommend putting it inside an unordered list, as that's more semantically correct.