html form onsubmit函数解释,input、submit、button的区别

本文详细阐述了HTML中input、submit与button的区别,重点介绍了submit按钮如何提升页面易用性,包括支持键盘enter键操作的特点及其实现方法。

我的新项目ecgoo add_supply.html onsubmit="return check_add_supply(参数)"

 

 

 

以下内容来自链接:http://blog.1xi.net/html/submit-button-qubie

html中的input、submit和button的区别

Filed under: HTML — fangds @ 15:33

type=button      就单纯是按钮功能
type=submit      是发送表单

但是对于从事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。

比如:

1,onclick=”form1.action=’a.jsp’;form1.submit();”     这样就实现了submit的功能了。

2,<form    name=”form1″    method=”post”    action=”http://blog.1xi.net”>
<input    type=”button”    name=”Button”    value=”Button”    onClick=”submit()”>
</form>

3,<input    type=”button”    name=”Button”    value=”Button”    onClick=”javascript:windows.location.href=”你的url”">

源码来自:https://pan.quark.cn/s/41b9d28f0d6d 在信息技术领域中,jQuery作为一个广受欢迎的JavaScript框架,显著简化了诸多操作,包括对HTML文档的遍历、事件的管理、动画的设计以及Ajax通信等。 本篇文档将深入阐释如何运用jQuery达成一个图片自动播放的功能,这种效果常用于网站的轮播展示或幻灯片演示,有助于优化用户与页面的互动,使网页呈现更加动态的视觉体验。 为了有效实施这一功能,首先需掌握jQuery的核心操作。 通过$符号作为接口,jQuery能够迅速选取DOM组件,例如$("#id")用于选取具有特定ID的元素,而$(".class")则能选取所有应用了某类class的元素。 在选定元素之后,可以执行多种行为,诸如事件监听、样式的变更、内容的更新以及动画的制作等。 关于“一个基于jQuery的图片自动播放功能”,首要任务是准备一组图片素材,这些素材将被整合至一个容器元素之中。 例如,可以构建一个div元素,将其宽度设定为单张图片的尺寸,再借助CSS实现溢出内容的隐藏,从而构建出水平滚动的初始框架。 ```html<div id="slider"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <!-- 更多图片内容... --></div>```接着,需要编写jQuery脚本以实现图片的自动切换。 这通常涉及到定时器的运用,以设定周期性间隔自动更换当前显示的图片。 通过使用`.fadeOut()`和`.fadeIn()`方法,能够实现图片间的平滑过渡,增强视觉效果。 ```javascript$(document).re...
HTML中表单数据的提交可以通过多种方式触发,具体取决于使用的元素类型和配置。以下是几种常见的触发方式及其工作机制: ### 表单提交的触发方式 1. **使用`<input>`元素** 当 `<input>` 元素的 `type` 属性设置为 `"submit"` 时,点击该按钮会触发表单提交[^2]。例如: ```html <form action="/submit" method="post"> <input type="text" name="username" /> <input type="submit" value="Submit" /> </form> ``` 在此示例中,当用户点击“Submit”按钮时,表单数据将按照指定的 `action` 和 `method` 提交到服务器。 2. **使用`<button>`元素** `<button>` 元素默认的 `type` 是 `"submit"`,因此点击此类按钮也会触发表单提交。如果希望按钮不提交表单,则需要显式地将 `type` 设置为 `"button"`[^1]。例如: ```html <form action="/submit" method="post"> <input type="text" name="username" /> <button type="submit">Submit</button> <button type="button" onclick="handleButtonClick()">Cancel</button> </form> ``` 在此示例中,“Submit”按钮会提交表单,而“Cancel”按钮则不会,因为它被设置为 `type="button"`。 3. **通过回车键触发** 在某些情况下,用户在输入框中按下回车键(Enter)可能会触发表单提交,特别是当表单中存在一个 `type="submit"` 的按钮时。这种行为是由于浏览器默认事件冒泡机制导致的[^4]。例如: ```html <form action="/submit" method="post"> <input type="text" name="username" /> <button type="submit">Submit</button> </form> ``` 在此示例中,如果用户在输入框中按下回车键,表单将被提交。 4. **通过JavaScript手动提交** 表单也可以通过JavaScript代码来手动提交,而不依赖于用户点击按钮或按下回车键。例如,可以调用表单对象的 `.submit()` 方法来实现提交: ```html <form id="myForm" action="/submit" method="post"> <input type="text" name="username" /> <button type="button" onclick="submitForm()">Submit via JS</button> </form> <script> function submitForm() { document.getElementById('myForm').submit(); } </script> ``` 5. **阻止默认提交行为** 如果需要阻止表单的默认提交行为,可以在 `onsubmit` 事件中返回 `false`,或者在事件处理函数中使用 `event.preventDefault()` 方法。例如: ```html <form id="myForm" action="/submit" method="post" onsubmit="return false;"> <input type="text" name="username" /> <button type="submit">Submit</button> </form> ``` 在此示例中,即使用户点击了“Submit”按钮,表单也不会提交,因为 `onsubmit="return false;"` 阻止了默认行为[^2]。 ### 总结 - `<input type="submit">` 和 `<button type="submit">` 都可以用来触发表单提交。 - 默认情况下,按下回车键可能会触发表单提交,尤其是在存在提交按钮的情况下。 - 使用 JavaScript 可以手动控制表单的提交行为,甚至可以完全绕过传统的提交方式。 - 如果需要阻止表单提交,可以通过设置 `onsubmit="return false;"` 或使用 `event.preventDefault()` 来实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值