表单(form)嵌套在表格中表格(table)中,会产生错误。
如果在table中包含form,需要完全独立包含在<td>
里面,而不能是<tr>
里面,这是HTML的规范。
例如如下代码是购物车index页面,页面是一个商品列表,每一个商品会带有一个更新按钮,用于更新修改后的商品数量。
如果使用开启turbolinks
,则该按钮会无法正常使用,点击无反应,关闭turbolinks
则可以使用。
firefox浏览器查看源码,错误部分会被标红。 除了使用表格布局外,也可以改为由div布局。
下面是错误写法:
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th>价格</th>
<th>数量</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<tr>
<td>农家猪肉</td>
<td>¥32.00</td>
<form class="edit_cart" id="169_edit_cart_169" action="/carts/169" accept-charset="UTF-8" method="post">
<td>
<input min="1" max="100" value="7" step="1" required="required" type="number" name="cart[amount]" id="169_cart_amount" />
<input type="submit" name="commit" value="更新" class="btn btn-primary btn-xs" data-disable-with="更新" />
</td>
</form>
<td><a data-confirm="确定删除?" class="btn btn-primary btn-xs" rel="nofollow" data-method="delete" href="/carts/169">删除</a></td>
</tr>
</tbody>
</table>
下面是修改后,将form完全包含在td标签中,可以正常工作。
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th>价格</th>
<th>数量</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<tr>
<td>农家猪肉</td>
<td>¥32.00</td>
<td>
<form class="edit_cart" id="169_edit_cart_169" action="/carts/169" accept-charset="UTF-8" method="post">
<input min="1" max="100" value="7" step="1" required="required" type="number" name="cart[amount]" id="169_cart_amount" />
<input type="submit" name="commit" value="更新" class="btn btn-primary btn-xs" data-disable-with="更新" />
</form>
</td>
<td><a data-confirm="确定删除?" class="btn btn-primary btn-xs" rel="nofollow" data-method="delete" href="/carts/169">删除</a></td>
</tr>
</tbody>
</table>