HTML:是否可以在每个TABLE ROW中以XHTML有效的方式使用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

值得一提的是,在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 2

我有一个类似的问题,这个答案有问题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>

Answer 3

你不能.您唯一的选择是将其分成多个表并将表单标记放在其外部.您最终可能会嵌套表格,但不建议这样做:

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

我会完全删除表格,并用样式的html元素替换它,如div和span.