多行表格不适用于 HTML 中的表单答案

【问题标题】：Table with multiple rows doesn't work with forms in HTML多行表格不适用于 HTML 中的表单
【发布时间】：2016-07-16 04:58:41
【问题描述】：

基本上，我有一个表格，表格标签内有输入，用户需要填写。

当我测试它时，表单可以正常工作，但只有在表格中有一行时。再多两行，必需的属性不起作用。

我写了一个简单的example

这行得通，点击输入框内的输入即可查看。

<form>
  <table>
  <tr>
    <td>
      <input type="text" name="usrname" required>
    </td>
  </tr>
  </table>
</form>
<br>

这个不行，在输入框内点击进入查看。

<form>
  <table>
  <tr>
    <td>
      <input type="text" name="usrname" required>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="surname" required>
    </td>
  </tr>
  </table>
</form>

【问题讨论】：

您的两个输入字段具有相同的name 属性，您是否尝试过使用不同的值？
这是因为有多个文本输入的表单不会通过按 Enter 提交。尝试在两个表单中添加一个提交按钮，您会发现它工作正常。
很好的@j08691 例子在这里jsfiddle.net/qb9ep6jf
@j08691 感谢您的解释。还有 timothyclofford 例如，它确实有效。有人可以写出正确的答案，所以我可以接受。

标签： html forms post input

【解决方案1】：

这是因为具有多个文本输入的表单不会通过按 Enter 提交。尝试在两个表单中添加提交按钮，您会发现它工作正常。

【讨论】：

【解决方案2】：

在您的示例中，这是否应该是不同单元格中的两个相同字段（其中一个只是拼写错误）？如果是这样，那很可能是你的问题。如果它们打算成为两个独立的字段，它应该可以工作，但我需要看一个更真实的例子。

另外，我强烈建议您使用 CSS 来设置表单的格式/样式。如果这听起来很吓人，试试 Bootstrap——它让创建漂亮的表单变得非常容易。

【讨论】：

它们是不同的字段，问题在于通过按回车键提交多个输入，就像@j08691 指出的那样。
为了我自己的启迪和教育，请告诉我你们怎么知道这是按 Enter 的问题。我看不出亚当在哪里说过或表明了这一点。