Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

How to Reset a HTML5 Form in Javascript Using reset() Method in Browser

Posted on October 1, 2022

Welcome folks today in this blog post we will be looking to reset a HTML5 Form in Javascript. I will show a complete example with full source code

 

 

Using Reset Attribute in HTML5 Form

 

 

In the first example we will use the reset attribute to reset the html5 form as shown below

 

 

1
<input type="reset" value="Reset" />

 

 

In the above code you can see we are using the type attribute as reset to actually the reset or clear out the html contents of the input fields

 

Now we can integrate this reset button with a html5 form as shown below in this code

 

 

index.html

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>How to Reset HTML5 Form in Javascript</title>
</head>
 
<body>
    <form method="post">
        <input type="text" name="" id="">
        <input type="submit" value="Register"/>
        <input type="reset" value="Reset" />
    </form>
</body>
<script src="script.js"></script>
</html>

 

 

Now inside the javascript code we will be using the reset() method to clear out the htmlinput fields

 

 

JavaScript
1
2
const registrationForm = document.getElementById("registrationForm");
registrationForm.reset();

 

 

Recent Posts

  • Node.js OfficeGen Example to Generate Excel Files By Adding Data inside Cells & Sheets in Javascript
  • Node.js OfficeGen Example to Create Word Docx Files & Add Text Images inside it Using Javascript
  • React.js Twitter API Tutorial to Embed Profile & Timeline, Hashtags of User in Browser Using Javascript
  • Android Java Tutorial to Change Styles & Visibility of System Bars (Top, Action & Status) Full Example
  • Android Java Project to Display & Play Audio Files From Storage inside ListView Using MediaPlayer Class
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme