警惕HTML标签嵌套错误

表单(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>

Resources