表单问题总结与最佳实践
转：yupeng
表单问题总结与最佳实践
工作中常常碰到很多的表单提交，表单对齐的问题，下面来总结下我碰到的问题。也欢迎大家补充。
1）表单对齐问题
曾今做了这么个表单 ，当时关于这个表单对齐的问题上可是花费了一些时间，即使是设置vertical-align：middle，也没有对齐。后来是通过添加margin-top：-2px来解决这个问题的。这个其实和字体的设置是有很大关系的，我们的字体是 font: 12px/1.5 arial,宋体; 首选的是arial字体，所以必须是通过添加margin-top：-2px来解决（我是用的12px字体），其实只要把字体换成tahoma字体的话，然后再设置vertical-align：middle。就可以了。
2）表单提交问题
有2种方式，第一种方式是直接在html中写form+iframe或者是form的方式提交，form+iframe一般是提交内容，浏览器不发生跳转，就在本页面中，我一般用来解决跨域问题，没有跨域我就用ajax的提交了。form 单独的表单提交，一般用来做类似登录的那种提交，页面先来跳转到登录页，可以在后面加上自己的地址，然后再返回到到本页来。一般是通过添加一个参数来做的。
第二种方式是通过js的方式动态创建表单，这种方式的好处主要是不用在页面上写很多的html，我们通过脚本自动创建，append到body的最后面，但是有些要注意。在ie6下，不支持document.createElement的形式创建iframe，必须用innerHTML的形式动态创建iframe，对于form表单，里面的input隐藏的选项，如果我们用innerHTML的形式添加的话，可能会由于要添加的value值有引号的情况可能post不过去，因为value也有引号。最好的方式
是用document.createElement的方式来创建，由于input可能比较多，建议添加一个文档碎片来处理，不至于每次都操作dom节点。
3）中文的问题
表单中的中文需要转码吗？不需要，我在最初的开发的时候给转码了。后来发现不对，在此我记录下。
表单问题总结与最佳实践
工作中常常碰到很多的表单提交，表单对齐的问题，下面来总结下我碰到的问题。也欢迎大家补充。
1）表单对齐问题
1.png (1.91 KB, 下载次数: 7)
曾今做了这么个表单 ，当时关于这个表单对齐的问题上可是花费了一些时间，即使是设置vertical-align：middle，也没有对齐。后来是通过添加margin-top：-2px来解决这个问题的。这个其实和字体的设置是有很大关系的，我们的字体是 font: 12px/1.5 arial,宋体; 首选的是arial字体，所以必须是通过添加margin-top：-2px来解决（我是用的12px字体），其实只要把字体换成tahoma字体的话，然后再设置vertical-align：middle。就可以了。
2）表单提交问题
有2种方式，第一种方式是直接在html中写form+iframe或者是form的方式提交，form+iframe一般是提交内容，浏览器不发生跳转，就在本页面中，我一般用来解决跨域问题，没有跨域我就用ajax的提交了。form 单独的表单提交，一般用来做类似登录的那种提交，页面先来跳转到登录页，可以在后面加上自己的地址，然后再返回到到本页来。一般是通过添加一个参数来做的。
第二种方式是通过js的方式动态创建表单，这种方式的好处主要是不用在页面上写很多的html，我们通过脚本自动创建，append到body的最后面，但是有些要注意。在ie6下，不支持document.createElement的形式创建iframe，必须用innerHTML的形式动态创建iframe，对于form表单，里面的input隐藏的选项，如果我们用innerHTML的形式添加的话，可能会由于要添加的value值有引号的情况可能post不过去，因为value也有引号。最好的方式
是用document.createElement的方式来创建，由于input可能比较多，建议添加一个文档碎片来处理，不至于每次都操作dom节点。
3）中文的问题
表单中的中文需要转码吗？不需要，我在最初的开发的时候给转码了。后来发现不对，在此我记录下。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
最好不要用iframe，经验教训啊
ajax提交，除非你的页面其他的数据很多，要提交的数据又很少，可以用，不然还是常规提交吧