为什么“提交”按钮显示在<form>？</form>之前

Question

这有点令人惊讶。即使它看起来像我的提交标签应该在表单中出现，它显示在表单之前。 html源对我来说没问题，但结果显示和DOM是错误的。不知道什么会改变它。提交按钮显示在表单之前。

你能看到什么吗？

查看文件：

<%= content_tag :table do %>
  <%= content_tag :thead do %>
    <% 5.times do |q| %>
      <%= content_tag :th, "1" %>
    <% end %>
  <% end %>
  <%= content_tag :tbody do %>
    <%= form_tag program_participant_round_survey_path(
        program_id: @program.id, participant_id: @participant.id, round_id: @current_round.id), :method => 'put'  do %>
      <%= render partial: 'value', collection: @values  %>
      <%= submit_tag "Save" %>
    <% end %>
  <% end %>
<% end %>

html的关键部分：

...
<tr>
  <td>
    Scaling Up vs. Scaling Out
</td>
    <td>
      <input id="values__q0" name="values[]" type="radio" value="q0" />
</td>    <td>
      <input id="values__q1" name="values[]" type="radio" value="q1" />
</td>    <td>
      <input id="values__q2" name="values[]" type="radio" value="q2" />
</td>    <td>
      <input id="values__q3" name="values[]" type="radio" value="q3" />
</td></tr>
      <input name="commit" type="submit" value="Save" />
</form></tbody></table>
  </div>
</div>
</body>
</html>

以下是浏览器中的页面：

这就是DOM：

的样子

Answer 1

这就是浏览器如何处理不属于那里的表中的元素 - 它假设它们是一个标题并在表之前移动它们。

您在表格中有<input type="submit">但在生成的代码中没有<tr>。

如果您将<input>包裹在<tr><td>中，它将不再在表格之前移动。请注意，建议不要使用表格进行布局。

Answer 2

我不知道发生了什么的确切原因，但我个人会这样做：

<%= form_tag program_participant_round_survey_path(
        program_id: @program.id, participant_id: @participant.id, round_id: @current_round.id), :method => 'put'  do %>
  <%= content_tag :table do %>
    <%= content_tag :thead do %>
      <% 5.times do |q| %>
        <%= content_tag :th, "1" %>
      <% end %>
    <% end %>
    <%= content_tag :tbody do %>        
      <%= render partial: 'value', collection: @values  %> 
    <% end %>
  <% end %>
  <%= submit_tag "Save" %>
<% end %>