How to reset all form values using a button in HTML ?
To reset all field values in an HTML form, you can use the <input type=”reset”> attribute. When the reset button is clicked, the form will be restored to its default state, without any of the values that were previously entered in the fields, checkboxes, or radio buttons. This can be useful in various scenarios. In this article, we will focus on how to clear input fields.
Syntax:
<input type="reset">
Example 1: Rest form using input type reset
HTML
<!DOCTYPE html>
< html >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< form >
< input type = "text" placeholder = "Email address"
id = "email" name = "email" />
< br />< br />
< input type = "password" placeholder = "Password"
id = "pin" name = "password" maxlength = "8" />
< br />< br />
< input type = "reset" value = "Reset"
style = "background-color: red; color: white" />
< input type = "submit" value = "Submit"
style = "background-color: green; color: white" />
</ form >
</ body >
</ html >
|
Output:
Example 2: Rest form using JavaScript
HTML
<!DOCTYPE html>
< html >
< head >
< title >Form Example</ title >
</ head >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< form id = "myForm" >
< input type = "text" placeholder = "Email address"
id = "email" name = "email" />
< br />< br />
< input type = "password" placeholder = "Password"
id = "pin" name = "password" maxlength = "8" />
< br />< br />
< button type = "button" onclick = "resetForm()"
style = "background-color: red; color: white" >
Reset
</ button >
< input type = "submit" value = "Submit"
style = "background-color: green; color: white" />
</ form >
< script >
function resetForm() {
document.getElementById("myForm").reset();
}
</ script >
</ body >
</ html >
|
Output:
Last Updated :
23 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...