当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 美化网页表单的提交和重置按钮

Javascript
JS 参数传递的实际应用代码分析
prototype与jquery下Ajax实现的差别
用JS写的简单的计算器实现代码
javascript 数组操作实用技巧
JavaScript 中级笔记 第二章
JavaScript 中级笔记 第三章
JavaScript 中级笔记 第四章 闭包
JavaScript 中级笔记 第五章 面向对象的基础
Mootools 1.2教程 函数
Mootools 1.2教程 事件处理
通过Mootools 1.2来操纵HTML DOM元素
Mootools 1.2教程 设置和获取样式表属性
Mootools 1.2教程 输入过滤第一部分（数字）
Mootools 1.2教程 输入过滤第二部分（字符串）
Mootools 1.2教程 Fx.Tween的使用
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
MooTools 1.2中的Drag.Move来实现拖放
Mootools 1.2教程 正则表达式
Mootools 1.2教程 定时器和哈希简介
Mootools 1.2教程 滚动条（Slider）

No. « 184 185 186 187 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-28   浏览: 393 ::
收藏到网摘: n/a

为了整个界面美观，我们需要对提交和重置按钮美化一番，可是无论用什么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>

　　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()。