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

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

Leave a reply

• 返回顶部
• type=”button”和type=”submit”区别
• type=”button”实现type=”submit”功能

在提交表单数据时会用到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”功能

view source print ?

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.