谈HTML表单元素的一种写法

Aug 26	谈HTML表单元素的一种写法
	Categories: JavaScript \| Tags: JavaScript, jQuery \| Views: 2,494

默认的表单(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>