为什么“提交”按钮会显示在 <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 %>