美化网页表单的提交和重置按钮

2016-02-20 00:54 54 1 收藏

今天图老师小编给大家精心推荐个美化网页表单的提交和重置按钮教程，一起来看看过程究竟如何进行吧！喜欢还请点个赞哦~

【 tulaoshi.com - Web开发】

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）为了整个界面美观，我们需要对提交和重置按钮美化一番，可是无论用什么CSS样式定义按钮，都很难达到满意的效果，只得用JS+图片的方式进行处理，下边我是总结出的几种方法：

　　1、用图片代替提交和重置按钮，给图片加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

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）　　3、用图片代替提交和重置按钮，并加上链接，效果同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()。

来源:https://www.tulaoshi.com/n/20160220/1632781.html

上一篇：小白软件管家能帮我解决什么问题？
下一篇： JavaScript入门教程(5):Screen屏幕对象

看过《美化网页表单的提交和重置按钮》的人还看了以下文章更多>>

用表单来提交sql - 1

标签： ASP

<% '从表单中提取值 fName = request.form("fName") lName = request.form("lName") age = request.form("age") '建立SQL语句 iStr = "insert into uData (fName, lName, age) " iStr = iStr & "values (" iStr = iStr & "'" & fName & "', &quo...

用表单来提交sql - 3

标签： ASP

列表 D: buildSQLInsert函数的最终版。 <% function buildSQLInsert( targetTable, omitFields) iStr = "insert into " & targetTable & " " vStr = "values (" ...

用表单来提交sql - 2

标签： ASP

列表 B:使用 request.form 来轻松建立SQL字符串。 <% iStr = "insert into uData " vStr = "values (" nStr = "(" ' 在表单集合中循环，并建立起SQL语句的组成部分 for each x in request.form ' 建立字段名列表 &n...

取得表单提交的所有数据

标签： Web开发

代码如下： % For Each x In Request.Form % Request.Form( %= x % ) = %= Request.Form(x) % BR % Next % 或 % For i = 1 To Request.Form("inputname").Count Response.Write Request.Form("input...

关于文摘插件提交表单的开发

标签： ASP

实例：具体功能见“我爱博客（http://www.woiblog.com）”里有相关使用介绍！ 1,要实现的功能就是在浏览器加一个右键快捷方式提交所选的网页或图片内容！实例应用在博客程序里，就是在你已登陆的情况下，浏览网页时看到比较好的新闻或图片！你就可以选中内容--》点右键出现“加入我的网摘”，这时就会弹出一个IE窗口，自动将网页标题...

查看更多精彩>>