what is the code for reset the text field form? - html

Question

I want to set a button which allow the user to reset the contact form, is there any method to do it?
here is my coding for text field
<div style="float:left;width:600px;"><!--textfield-->
<div style="float:left;">
<div style="float:left;width:90px;padding-top:5px">
NAME
</div>
<div style="float:left;padding-top:4px">
:
<input type="text" class="textfield"/>
</div>
</div>
<div style="float:left;padding-top:8px;">
<div style="float:left;width:90px;padding-top:5px">
EMAIL ADDRESS
</div>
<div style="float:left;padding-top:2px">
:
<input type="text" class="textfield"/>
</div>
</div>
<div style="float:left;padding-top:8px;">
<div style="float:left;width:90px;padding-top:5px">
CONTACT NUMBER
</div>
<div style="float:left;padding-top:2px">
:
<input type="text" class="textfield"/>
</div>
</div>
<div style="width:120p;float:left;padding-top:8px;">
<div style="float:left;width:90px;padding-top:5px">
MESSAGE
</div>
<div style="float:left;padding-top:2px">
:
</div>
<div style="float:left;margin-left:3px;padding-top:2px;">
<textarea cols="48" rows="6" class="textfield"></textarea>
</div>
</div>
</div><!--textfield-->
</div><!--end leave your personal details-->
<div style="clear:both"></div>
<div>
<div id="buttonreset"><!--buttonreset-->
<img src="img/buttonreset1.png" width="54" height="24" alt="reset" />
</div><!--end.buttonreset-->
<div id="buttonsend"><!--buttonsend-->
<img src="img/buttonsend1.png" width="54" height="24" alt="send" />
</div><!--end.buttonsend-->
</div>
Css
.textfield {
font-family: CenturyGothic;
font-size: 12px;
color: #231F20;
resize: none;
text-align: left;
}
textarea {
border: thin solid #221F1F;
border-radius: 5px;
width: 430px;
height: 160px;
opacity: 0.8;
}
input {
border: thin solid #221F1F;
border-radius: 4px;
width: 430px;
height: 21px;
opacity: 0.7;
}
#buttonreset {
margin-top: 5px;
background-image: url(../img/buttonreset.png);
background-repeat: no-repeat;
height: 24px;
width: 54px;
margin-top: 10px;
margin-left: 410px;
float:left;
}
#buttonreset img {
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
opacity:0;
}
#buttonreset img:hover {
opacity:1;
cursor:pointer;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
Chrome, and Safari */
}
I haven't add any coding to my button, what code suitable for my button?
this is my fiddle:
http://jsfiddle.net/K5CJ4/

Answer 1

<input type='reset'>
is the easiest method.
[Edit]
Since you're trying to reset the form using an image, the easiest way is to use the reset() method in Javascript. (No need for a library like jQuery). To accomplish this, I simply added a bit of javascript to your <a> tag in your form, as well as wrapped the entire example in <form></form> tags, giving it an id of contactForm .
DEMO

Answer 2

use jQuery way to solve it. like this :
$("#buttonreset").click(function() { // div's id
$("#txtField1").val("");
$("#txtField2").val("");
});

Answer 3

Try to use :
<button type="reset" id="btnreset" value="Reset">Reset</button>
The button is a reset button (resets the form-data to its initial values)
#btnreset {
background-image: url("http://www.ricksdailytips.com/wp-content/uploads/2013/11/reset-button.gif");
border: 0 none;
height: 204px;
width: 200px;
}

Answer 4

If you want to automate this, you could set it such that the page refreshes the entire page after a given number of seconds. use the meta tag:
<meta http-equiv="refresh" content="(enter number of seconds before refresh);url=thispage.html" />