HTML表单中button和submit的原理和差异
HTML中submit和button二者都以按钮的形式展现,看起来都是按钮,但所不同的是type属性和触发响应的事件上,submit会提交表单数据,而普通的button需要通过js或jq才能提交表单,默认状态下没啥效果。
submit和button两者主要区别在于:
1、submit默认为form提交,可以提交表单(form)。submit其实是button的一种特殊的按钮,他把表单中所有的数据集中并提交到了后台。
2、button作为普通的按钮则响应用户自定义的事件,如果不指定onclick等事件处理函数,它是不做任何事情,不会自动提交表单数据。当然,button也可以通过JS代码完成表单提交的工作。比如: onclick="document.form1.submit()"。
3、如果表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常都必须把submit改成button,即取消其自动提交的行为,否则,将会造成提交两次的效果,对于动态网页来说,也就是对数据库操作两次。或者在使用submit时验证时加return true或false。
4、submit需要有表单时,提交时才会带数据。而button默认是不提交任何数据。如果没有表单的话,又想通过提交某些数据给后台进行回应,则需要通过button,当然使用submit也可以,但是前提要拦截onclick事件。当有表单的时候,如果提交的数据很多,那么使用submit比button要好,可以减少很多数据的获取动作。在很多情况下,提交数据是要使用JS进行校验的,但如果这时候用户禁用了JS,那么校验就失效了,如果后台也没有进行校验,那么不合法的数据就进入后台了。通常的做法是通过button提交数据,那么如果用户禁用JS,那么数据提交动作就激活不了,这样能够保证提交到后台的数据是经过前台校验的。
想了解更多?现在就开始免费体验