75年生人,程序员,在西安。

FireFox浏览器中table与td之间无法嵌入form标签

FireFox浏览器中table与td之间无法嵌入form标签,这个是FireFox浏览器规定的,在IE等其他浏览器中可能不存在问题。
但这种需求是经常有的,比如在服务器端生成类似如下的表格:
<table>
    <tr>
        <th>H1</th>
        <th>H1</th>
        <th>H1</th>
        <th>H1</th>
    </tr>
    <form>
         <tr>
             <td><input /></td>
             <td><input /></td>
             <td><input /></td>
             <td><input type="submit" /></td>
         <tr>
    </form>
    <form>
         <tr>
             <td><input /></td>
             <td><input /></td>
             <td><input /></td>
             <td><input type="submit" /></td>
         <tr>
    </form>
    <form>
         <tr>
             <td><input /></td>
             <td><input /></td>
             <td><input /></td>
             <td><input type="submit" /></td>
         <tr>
    </form>
</table>
本来这样是很方便的,有几方面好处:一、表格可以很好地格式化这样的表单;二、各表单独立提交,互不影响。
但在FireFox中是不允许的,form标签不能放在table和td之间的任何一个层次,尝试过几种写法都不行,最后只能放弃。
解决方案有以下一些:
一、将各行分开成单独的表格,在表头与下面的各行表格中需要设置各单元格的宽度,以使各表格显示列对齐,这样一个form包含一个table,在FireFox中是可以正常使用的。
二、表格还是照旧循环,不加form,在表格外某处放个隐藏的form,点表格中的提交按钮时,用脚本将该行的各表单项的值赋给隐藏的form,实际再操作隐藏的form.submit()即可。

相对来说可能方案二,更简洁一些,只是加脚本即可。html代码不会增加太多。

补充一点个人的想法:实际form这个标签让人感觉是没什么用的,html标签是用来格式化内容的,现在都提倡用div标签来分隔各个内容块,实际个人觉得完全可以将form变成一个通用的属性,基本的一些容器标签都可以有这个属性,举例如下:
<div form="true" action="/someurl" method="post">...</div>

<table form="true" action="/someurl" method="post">...</table>
<table>
    <tr form="true" action="someurl" method="post">
        ....
    </tr>
</table>
可以限制form不可以嵌套使用等……

看了一下HTML5好象也没有类似的东东,不知道这样的想法会不会实现……

评论

© 世风十三 | Powered by LOFTER