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 ...
随机推荐
- PHP PDO获取结果集
一.介绍PDO获取结果集,不得不介绍一下PDO是如果执行SQL语句,一般情况下分三种, 1.query()方法 query()方法通常用于返回执行查询后的结果集.语法是这样的:PDOStatement ...
- equals和hashcode
java当中所有的类都继承于Object这个基类,在object中的基类定义了一个equals方法,public boolean equals(Object obj) { return (th ...
- asp.net使用Mysql乱码处理
在asp.net与mysql数据库打交道的时候,由于配置的问题,会遇到自己写的方法在读取数据库中数据的时候,英文,数字可以正常通过,但是中文就无法通过,以登录为例(方法略),当输入英文用户名的时候可以 ...
- Android学习----AndroidManifest.xml文件解析
一个Android应用程序的结构: 一.关于AndroidManifest.xml AndroidManifest.xml 是每个android程序中必须的文件.它位于整个项目的根目录,描述了pack ...
- JavaScript-学习一加载不动
为先加载的js后加载的html 加载完js运行时因为未加载html的原因导致找不到js所控制的元素 所以解决的方法就是把js放到控制元素的下方 或者html的底部 做成函数的时候可以放在头部,也就是说 ...
- Spring MVC PageNotFound.noHandlerFound No mapping found for HTTP request with URI
首先骂人,干他娘的,弄了两个小时原来的包倒错了!!唉TMD. 注意用IDEA倒包的时候一定要注意ModelAndView是 原因是import出错了!!应该是import org.springfram ...
- 网易DBA私享会分享会笔记1
1.mysql生态+DBA职业发展世界范围流行的开源关系型的数据库关系型数据库:mysql,oracle,sql server,access,postgresql,sqlite,sybase,info ...
- Echop后台分页实现原理详解
ecshop后台开发,工作中分页中遇到的问题 1.通过筛选条件筛选出数据后,点击下一页返回没有筛选(所有数据)的第二页数据 效果 结果 点击分页后效果 问题:ecshop分页利用ajax实现,在点击下 ...
- 学习python——博客记录第一天
HELLO WORLD! 今天第一次开立博客,专门记载学习编程语言中的点点滴滴.今日学习内容: 搭建vs code+ python3.5 "ide" 学习廖雪峰python教程 ...
- easyui combo+pagination 图标选择器
从数据库读取分页显示 $(function () { initTable(1, 180); $('#cc').combo({ editable: false, panelWidth: 'auto', ...