表单元素input、button、submit、submit()、onsubmit()详解

表单元素input、button、submit、submit()、onsubmit()详解

在提交表单数据时会用到input、button、submit、submit()、onsubmit()等元素,下面就这几个元素之间的联系与不同做一下解释:

type=”button”和type=”submit”区别

input作为按钮来使用,其type属性值可为button、submit,其中“button”只是单纯的定义了一个按钮,
而“submit”是定义了一个提交按钮,即把表单数据action给URL。并且使用了“submit”的input支持键盘的enter键,
这提高了页面的易用性,默认enter键对页面出现的第一个submit进行操作。

type=”button”实现type=”submit”功能

01. <form action="" method="" onsubmit="return abc();">
02.  
03. <span style="text-decoration: underline;">A</span>:<input type="submit" name="" value="提交"><!--提交表单数据-->
04.  
05. <span style="text-decoration: underline;">B</span>:<input type="button" name="" value="提交" onClick="submit()"><!--点击时触发onClick事件,然后激活此form的submit()方法-->
06.  
07. <span style="text-decoration: underline;">C</span>:<input type="button" name="" value="提交" onClick="this.form.submit()"><!--点击时触发onClick事件,然后激活此form的submit()方法-->
08.  
09. <span style="text-decoration: underline;">D</span>:<input type="button" name="" value="提交" onClick="this.form.onsubmit()"><!--点击时触发onClick事件,然后激活此form的onsubmit()方法-->
10.  
11. <span style="text-decoration: underline;">E</span>:<input type="button" name="" value="提交" onClick="onsubmit()"><!--无效-->

功能详解

A 点击(回车)时,首先触发onsubmit事件,然后执行函数abc(),根据函数abc()内容判断是否提交表单数据(无onsubmit时直接提交)
B、C 点击时直接提交表单数据,不会出发onsubmit函数
D 点击时触发onsubmit函数,不会提交表单数据(解决:可以在函数abc中调form的submit()方法来提交)

This entry was posted in  Binary on  April 15, 2011  by miao.
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值