Replace the Submit and reset button with a picture

In order to the entire interface beautiful, we need to the submission and reset button to beautify some, but no matter what CSS style definition button, it is difficult to achieve satisfactory results, had to use js+ pictures of the way to deal with, below I was summed up three ways:

1, with pictures instead of submit and reset button, to the picture plus the onclick event

<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" />


</form>

2, to 1 of the picture plus style, used to make up for the method 1 mouse moved to the picture no response, failed to give customers a good browsing experience

<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" />


</form>

3, with pictures instead of submit and reset button, and add links, the effect of 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);"></a>
<a href="javascript:freset(document.form1);"></a>
</form>

4, the use of image fields. Because the default image fields are submitted by clicking on the form, the appropriate processing is done:

<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>

Note that the form submission and reset events in JS must be added (), such as Submit () and reset ()