HTML：是否可以使用XHTML有效方式在每个TABLE ROW中都有一个FORM标记？

Question

我可以最好地描述如下：我想要这个（整个表放入editmode并在每一行中保存按钮）。<table>    <tr>        <td>Id</td>        <td>Name</td>        <td>Description</td>        <td>&nbsp;</td>    </tr>    <tr>        <td><input type="hidden" name="id" value="1" /></td>        <td><input type="text" name="name" value="Name" /></td>        <td><input type="text" name="description" value="Description" /></td>        <td><input type="submit" value="Save" /></td>    </tr>    <tr>        <td><input type="hidden" name="id" value="2" /></td>        <td><input type="text" name="name" value="Name2" /></td>        <td><input type="text" name="description" value="Description2" /></td>        <td><input type="submit" value="Save" /></td>    </tr>    <!-- and more rows here ... --></table>我应该在哪里放置<form>标签？

Answer 1

你不能 您唯一的选择是将其分为多个表，然后将form标记放在表之外。您可能最终嵌套了表格，但是不建议这样做：

<table>

  <tr><td><form>

    <table><tr><td>id</td><td>name</td>...</tr></table>

  </form></td></tr>

</table>

我将完全删除表格，并用div和span等样式化的html元素替换表格。

Answer 2

值得一提的是，在HTML5中可以使用“ form”属性作为输入元素：

<table>

    <tr>

        <td>Id</td>

        <td>Name</td>

        <td>Description</td>

        <td>&nbsp;</td>

    </tr>

    <tr>

        <td><form id="form1"><input type="hidden" name="id" value="1" /></form></td>

        <td><input form="form1" type="text" name="name" value="Name" /></td>

        <td><input form="form1" type="text" name="description" value="Description" /></td>

        <td><input form="form1" type="submit" value="Save" /></td>

    </tr>

    <tr>

        <td><form id="form2"><input type="hidden" name="id" value="1" /></form></td>

        <td><input form="form2" type="text" name="name" value="Name" /></td>

        <td><input form="form2" type="text" name="description" value="Description" /></td>

        <td><input form="form2" type="submit" value="Save" /></td>

    </tr>

</table>

尽管缺少JS和使用原始元素虽然很干净，但是不幸的是，这在IE10中不起作用。

Answer 3

我有一个类似的问题，这个问题在HTML中：表格表格？为我解决了。（不确定是否为XHTML，但可以在HTML5浏览器中使用。）

您可以使用CSS将表格布局赋予其他元素。

.table { display: table; } 

.table>* { display: table-row; }

.table>*>* { display: table-cell; }

然后，使用以下有效的html。

<div class="table"> 

    <form>

        <div>snake<input type="hidden" name="cartitem" value="55"></div>

        <div><input name="count" value="4" /></div>

    </form>

</div>