谈HTML表单元素的一种写法:form写法在IE和FF,GG浏览器的不同

默认的表单(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>
本博客所有文章如无特别注明均为原创。作者:sysdee复制或转载请以超链接形式注明转自 成功志
原文地址《谈HTML表单元素的一种写法:form写法在IE和FF,GG浏览器的不同
分享到:更多

相关推荐

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交

网友评论(0)