Web设计中,<input type="button" value="提交"/>与<input type="submit" value="提交"/>这两种按钮功能很容易让人搞混!
submit类型的按钮用来提交表单;
很多人问,到底这两个类型谁可以替代谁!其实这两个类型的按钮在web设计中,各有所长!
submit类型的按钮支持enter键,这是为什么很多网站在输入完用户名和密码之后,可以直接按enter键进行登录!
button的功能不是这样!比如有如下脚本:
- <span style="font-size:18px;"> function beforeSubmit(){
- if(condition){
- $('div').css("border","solid red");
- return false;
- }
- }</span>
- <span style="font-size:18px;"><input type="submit" value="提交" onclick="beforeSubmit();"/></span>
可以很遗憾的告诉你,你的脚本效果是显示不出来的!因为submit不仅执行onclick方法,同时也提交表单!提交表单的同时,页面就被刷新了。你的return false
根本没有起到阻止表单提交的作用,而如果换成下面:
- <span style="font-size: 18px; "></span><pre name="code" class="html"><input type="button" value="提交" onclick="beforeSubmit();"/></pre><p></p>
- <pre></pre>
- 效果就可以出来了<br>
- <br>
- <p></p>
- <pre name="code" class="html"><pre></pre>
- <pre></pre>
- <pre></pre>
- <pre></pre>
- <pre></pre>
- <pre></pre>
- </pre>