i利用图片按钮 和 input type="image" 为背景提交表单
<img src="img/cancel.jpg" onclick="javascript:document.getElementByIdx_x('loginForm').reset();"/>
将图片作为背景,利用input标签也可实现图片提交按扭!
<input type="image" src="img/login.jpg"/>
<input type="reset" style="width:72px;height:37px;background-repeat:no-repeat;background-image:url(img/cancel.jpg);border:0;" value=""/>
[转]
用图片代替提交按钮submit和重置按钮reset,给图片加onclick事件
<script language="javascript">
function fsubmit(obj){
obj.submit();
}
function freset(obj){
obj.reset();
}
</script>
<form id="form1" name="form1" method="post" action="login.asp">
姓名: <input type="text" name="textfield" />
<img src="uploads/200707/30_145425_001.jpg" onClick="javascript:fsubmit(document.form1);">
<img src="uploads/200707/30_145428_002.jpg" onClick="javascript:freset(document.form1);">
</form>
2、给1的图片加上style,用于弥补方法1鼠标移到图片上无反应,未能给客户好的浏览体验
<script language="javascript">
function fsubmit(obj){
obj.submit();
}
function freset(obj){
obj.reset();
}
</script>
<form id="form1" name="form1" method="post" action="login.asp">
姓名: <input type="text" name="textfield" />
<img src="uploads/200707/30_145425_001.jpg" style="cursor:hand;" onClick="javascript:fsubmit(document.form1);">
<img src="uploads/200707/30_145428_002.jpg" style="cursor:hand;" onClick="javascript:freset(document.form1);">
</form>
3、用图片代替提交按钮submit和重置按钮reset,并加上链接,效果同2
<script language="javascript">
function fsubmit(obj){
obj.submit();
}
function freset(obj){
obj.reset();
}
</script>
<form id="form1" name="form1" method="post" action="login.asp">
姓名: <input type="text" name="textfield" />
<a href="javascript:fsubmit(document.form1);"><img src="uploads/200707/30_145425_001.jpg" border="0" /></a>
<a href="javascript:freset(document.form1);"><img src="uploads/200707/30_145428_002.jpg" border="0" /></a>
</form>
4、使用图像域。由于默认图像域点击时都是提交表单,因而要进行适当的处理:
<script language="javascript">
function fsubmit(obj){
obj.submit();
}
function freset(obj){
obj.reset();
}
</script>
<form id="form1" name="form1" method="post" action="login.asp">
姓名: <input type="text" name="textfield" />
<input type="image" name="imageField" onClick="javascript:fsubmit(document.form1);return false;" src="uploads/200707/30_145425_001.jpg">
<input type="image" name="imageField2" onClick="javascript:freset(document.form1);return false;" src="uploads/200707/30_145428_002.jpg">
</form>
要注意的是JS中表单提交和重置事件后必须加(),如submit()和reset()
i利用图片按钮 和 input type="image" 为背景提交表单的更多相关文章
- 表单只有一项 input 时按回车键会提交表单
在 Vue 中 使用 Element UI,使用表单 el-form 只有一个 el-input 项,使用 @keyup.enter.native 来处理回车事件. 结果发现按下回车时页面总会 ...
- 阻止form表单中的input按下回车时提交表单
给form加属性:onsubmit="return false;"
- 阻止form元素内的input标签回车提交表单
<form></form>标签内input元素回车会默认提交表单. 阻止回车默认提交表单: $('form').on('keydown', function (event) { ...
- input type="image" 提交表单
提到<input type="image" />,说起来有些惭愧.之前的工作基本每周都要制作两到三个注册用户的网页.其中就用它提交表单. 那个时候我想当然的以为这是用 ...
- jsp中普通按钮如何提交表单
jsp中普通按钮如何提交表单方法1: <form action = "提交的地址"> <input type="submit" ...
- 利用JS提交表单的几种方法和验证(必看篇)
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...
- button 按钮,结合onclick事件,验证和提交表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 利用JS提交表单的几种方法和验证
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function ...
- 基于ASP.Net +easyUI框架上传图片,实现图片上传,提交表单
<body> <link href="../../Easyui/themes/easyui.css" rel="stylesheet" typ ...
随机推荐
- 在SpringMVC框架下建立Web项目时web.xml到底该写些什么呢?
刚刚初学Spring MVC,却连一个简单的helloworld都搞的懵懵懂懂的,配置文件搞不清,各种文件之间的逻辑关系也不懂,连续看了好些日子的Spring MVC了,今天终于下定决心,每天记录一点 ...
- SAS学习笔记
一. 在SAS中进行随机抽样: 1. 在实际数据处理中常常需要进行样本抽样,在实践中主要有两种情况: (1)简单无重复抽样(2)分层抽样 a.等比例分层抽样 b. 不等比例 ...
- jquery 实现文本框scroll上下动
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- eclipse 编辑 python 中文乱码的解决方案
今天在学习python时做了一个用户输入一个目录地址,再输入内容,然后将输入的内容存入输入的目录文件中: 具体代码如下: #coding:utf- ''' Created on -- @author: ...
- 清橙A1484
http://www.tsinsen.com/ViewGProblem.page?gpid=A1484### 题解: 在线插入并不好做,我们将所有操作离线,变为删除操作. 每次询问的时候对于当前B串所 ...
- 关于手机"内存"的解答
关于手机"内存"的解答 内存小/少 手机内存在手机出厂的时候就已经固定了,其总量无法调整,不能像电脑一样加内存条.所以想提升可用内存,除了经常清理系统,或者把不是必须的应用移到SD ...
- bing---iis how to process http request
http://msdn.microsoft.com/en-us/library/ms524901(v=vs.90).aspx http://msdn.microsoft.com/en-us/magaz ...
- MyEclipse10 中增加svn插件
http://www.cnblogs.com/bluesky4485/archive/2012/04/23/2467177.html 确实这种方法可行!向牛人学习!
- COJN 0558 800600带通配符的字符串匹配
800600带通配符的字符串匹配 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 通配符是一类键盘字符,当我们不知道真正字符或者 ...
- -_-#Error
Error: Argument passed in must be a single String of 12 bytes or a string of 24 hex characters Mongo ...