submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了。
如果表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常都必须把submit改成button,即取消其自动提交的行为,否则,将会造成提交两次的效果,对于动态网页来说,也就是对数据库操作两次。或者在使用submit时验证时加return true或false。
 
submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上,submit会提交表单,button不会提交表单.
两者主要区别在于:
submit默认为form提交,可以提交表单(form).
button则响应用户自定义的事件,如果不指定onclick等事件处理函数,它是不做任何事情.当然,button也可以完成表单提交的工作.
INPUT   type=submit 即发送表单,按回车提交表单   
INPUT   type=button 就是单纯的按钮功能,提交的是innerTEXT
 
===============submit 和 button的详细对比===================================
  submit:特殊的button,会自动将表单的数据提交,onClick方法不加return 会自动提交,并不会起到约束的作用,
所以,使用submit时需要验证请加 return true或false.
例:<input type="submit" name="Submit" value="注 册" onClick=" return check();">,在JS中判断的时候 写return true; 或者 return false;
  button:普通的按钮,不会自动提交表单数据.可以在JS中显式提交:document.form1.submit(),使用场合: 一个页面有多个提交按钮,需要根据用户的操作来确定到底提交到哪个控制器,这种情况下,就需要在JS中判断用户的操作,然后根据操作来给document.form1.action赋值并且document.form1.submit()来提交
 
===============如果想好所有的提交都在一个servlet中处理,该怎么做==================
 提交的按钮也是HTML组件,所以也可以通过 getParameter()来得到,那么getParameter()的参数也需要固定下来
 参数就是所有的表单的提交按钮的name,当然提交按钮的name要一样才能统一在一个servlet中根据提交按钮的值来区别操作
 
======================关于路径的设置===================================
A.在页面中直接写路径,如 href="jsp/a.html" 表示 平级目录的访问,此例表示平级目录中有个JSP文件夹,访问的是文件夹中的a.html文件
B.在JAVA中直接写路径,如 response.sendRedirect("jsp/a.jsp")表示项目根目录下有个JSP文件夹,访问的是文件夹中的a.jsp文件
C.如果发现以上设置在浏览器中的地址栏不正确,可以采取绝对路径写法:/工程名/文件夹名/文件名
 
但是对于从事WEB UI的人应该要注意到,使用submit来提高页面易用性:
使用submit后,页面支持键盘enter键操作,而很多WEB软件设计师,可能没有注意到submit统一.
用button后往往页面不支持enter键了。所以需要支持enter键,必须要设置个submit,默认enter键对页面第一个submit进行操作。
 
<input type="submit" name="b1" value="提交" onClick="bt_submit_onclick()">
执行完onClick,转到action。可以自动提交不需要onClick,所以说onclick这里可以不要。
 
<input type="button" name="b1" value="提交" onClick="bt_submit_onclick()">
执行完onClick,跳转文件在 js文件里控制,提交需要onClick.如果这儿没有 onClick,就没有任何响应
 
例如:
type="submit"
<form id="frm1" action="<%=request.ServerVariables("Script_Name")%>" method="post" onSubmit="return check_submit(this)">
<input id="btnconfirm" type="submit" value="确定" name="btnconfirm"></form>
 
type="button"
<form id="frmAddModi" action="<%=request.ServerVariables("Script_Name")%>" method="post" name="frmAddModi" >
<input id="btnconfirm" type="button" value="确定" name="btnconfirm" onClick="check(frmAddModi);"/></form>

Web开发中button与submit区别的更多相关文章

  1. web开发中../、./、/的区别

    原文:web开发中../.././的区别 最近在业余时间慢慢玩起了网站开发,觉得挺有意思的.在开发过程中,老是分不清 ../.././三者之间的区别,也老是弄混,最后仔细搜索研究了一下,现在终于懂了. ...

  2. Web开发中设置快捷键来增强用户体验

    从事对日外包一年多以来,发现日本的无论是WinForm项目还是Web项目都注重快捷键的使用,日本人操作的时候都喜欢用键盘而不是用鼠标去点,用他们的话来说"键盘永远比鼠标来的快",所 ...

  3. web开发中经常使用的js

    将自己在web开发中经经常使用到的一些JS总结一下. 1.改动标签和表单的值 改动标签的值: var customer = document.getElementById("custm&qu ...

  4. Redis在WEB开发中的应用与实践

    Redis在WEB开发中的应用与实践 一.Redis概述: Redis是一个功能强大.性能高效的开源数据结构服务器,Redis最典型的应用是NoSQL.但事实上Redis除了作为NoSQL数据库使用之 ...

  5. Web开发中的主要概念

    一.Web开发中的主要概念1.静态资源:一成不变的.html.js.css2.动态资源:JavaWeb.输出或产生静态资源.(用户用浏览器看到的页面永远都是静态资源) 3.JavaEE:十三种技术的集 ...

  6. (转)Web开发中最致命的小错误

    Web开发中最致命的小错误 现在,有越来越多所谓的“教程”来帮助我们提高网站的易用性.本文收集了一些在 Web 开发中容易出错和被忽略的小问题,并且提供了参考的解决方案,以便于帮助 Web 开发者更好 ...

  7. 第123天:移动web开发中的常见问题

    一.函数库 underscoreJS _.template: <ol class="carousel-indicators"> <!--渲染的HTML字符串--& ...

  8. Python Web开发中的WSGI协议简介

    在Python Web开发中,我们一般使用Flask.Django等web框架来开发应用程序,生产环境中将应用部署到Apache.Nginx等web服务器时,还需要uWSGI或者Gunicorn.一个 ...

  9. 彻底理解和解决移动WEB开发中CLICK点透问题

    在移动WEB开发中,有时候可能会出现点透问题,本文将围绕这个TAP点透问题,详细的讲述到底什么是点透,为什么会出现点透,如何避免出现点透,如果不可避免的出现了,如何解决解决移动WEB开发中CLICK点 ...

随机推荐

  1. 初始easyUI

    1 easyUI布局 <%@ page language="java" contentType="text/html; charset=UTF-8" pa ...

  2. 微信JS-SDK说明文档【申明:来源于网络】

    微信JS-SDK说明文档[申明:来源于网络] 地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

  3. 2018秋寒假作业4—PTA编程总结1

    7-1 打印沙漏 (20 分) 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个"*",要求按下列格式打印 所谓"沙漏形状",是指每行输出奇数个符 ...

  4. hash 位运算 练习

    hash  位运算 [以下代码仅做位运算的练习,算法本身不合理  php转译python] 从头到尾彻底解析Hash表算法_知识库_博客园 https://kb.cnblogs.com/page/18 ...

  5. 关于STM32时钟系统

    初学STM32,感觉最蛋疼的是它的时钟系统,每次看到它的那个时钟树就有点晕,虽然看了很多这方面的资料,甚至也已经写过很多STM32的模块代码,做过一些小项目,但一直还是对这一块模模糊糊,似懂非懂,所以 ...

  6. C++ 11 多线程下std::unique_lock与std::lock_guard的区别和用法

    这里主要介绍std::unique_lock与std::lock_guard的区别用法 先说简单的 一.std::lock_guard的用法 std::lock_guard其实就是简单的RAII封装, ...

  7. 解决端口耗尽问题: tcp_tw_reuse、tcp_timestamps

    一.本地端口有哪些可用 首先,需要了解到TCP协议中确定一条TCP连接有4要素:local IP, local PORT, remote IP, remote PORT.这个四元组应该是唯一的. 在我 ...

  8. (转载)中文Appium API 文档

    该文档是Testerhome官方翻译的源地址:https://github.com/appium/appium/tree/master/docs/cn官方网站上的:http://appium.io/s ...

  9. [js]js中类的继承

    凡事总有个开端,也有个tag节点(里程碑).阶段性的划分总结,是一种对精神的慰藉,否则精神就像野马一样,会放弃,会累死. 继承: 子类原型指向父类一个实例 类的继承-模拟系统类 Object -> ...

  10. 关于SQL视图的创建和使用方法

    SQL视图的创建和使用 视图这个东西在其他的软件中,我们也经常看得到,例如word中就有视图,我们不难发现,视图似乎是一种显示方式,就像WORD一样,有几种显示版面,这就是视图,那么SQL中的视图又该 ...