表单的整行可单击

Question

我有这样的表格：

以这种方式编码：

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

但是，这样，用户只能点击单选按钮来回答问题。但是，我想让答案的所有行都可以点击。如何更改此代码以使整行可以点击？

Answer 1

你应该将你的html改为这样的

  <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>

示例html here

Answer 2

大多数浏览器都会在

上切换您的单选按钮选择

1. 点击广播/复选框小部件
2. 点击标签元素本身。

您可以通过将标签的CSS修改为100％宽度轻松地使整个'行'可点击，并显示为'inline-block'

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

作为旁注：通常认为将表单数据放在表格中只是为了格式化是不好的做法。我建议将它放在无序列表中，因为这在语义上更正确。