默认的表单(form)是有margin的, 所以插入的时候, 可能会使布局变形.

有时候表单内的元素较多, 需要排版, 较为方便的还是table.

为了消除表单给页面布局带来的影响, 我常常喜欢这样插入表单:

<table>

    <form method="post" action="?" name="form1" id="form1">

 

        <tr><td><input type="submit" value="submit" /></td></tr>

 

    </form>

</table>

这样就没有表单带来的布局影响了.

然而, 当我用js来操作时, IE下影响不大, 但在FF下就出现问题了: 

alert($('#form1').html());

//用纯js操作效果是一样的 

IE下正常,可以得到表单的innerHTML, 但FF下却为空.

如果我用js在表单中插入一个元素, 但来alert,发现只有插入的那个元素的html: 

$('#form1').append('<input type="text" name="textfield" />');

alert($('#form1').html());

//FF中结果是<input type="text" name="textfield" >

//ie中可以得到原有元素加上插入的元素的html 

查看源代码发现, 原来FF把form的结束tag解释在了开始tag之后: 

<table>

            <form action="?" method="post" name="form1" id="form1"></form>

        <tbody><tr><td><input name="textfield" type="text"></td></tr>

        </tbody>

</table> 

故而form的innerHTML为空.

正确的写法应该是这样的: 

<style> /*可在css文件中定义*/

form{margin:0; padding0;}

</style>

 

<form method="post" action="?" name="form1" id="form1">

    <table>

        <tr><td><input type="submit" value="submit" /></td></tr>

    </table>

</form>