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