How to reset all form values using a button in HTML ? - GeeksforGeeks (2024)

Table of Contents

Syntax: HTML HTML Please Login to comment... Similar Reads Thank You!

Tutorials
- Python Tutorial
  - Taking Input in Python
  - Python Operators
  - Python Data Types
  - Python Loops and Control Flow
    - Python Conditional Statements
    - Python Loops
  - Python Functions
  - Python OOPS Concept
  - Python Data Structures
  - Python Exception Handling
  - Python File Handling
  - Python Exercises
- Java
- Programming Languages
- System Design
- Interview Corner
- Computer Science Subjects
- DevOps
- Linux
- Software Testing
- Databases
- Android
- Excel
- Mathematics
DSA
- Data Structures
- Algorithms
  - Analysis of Algorithms
  - Searching Algorithms
  - Sorting Algorithms
  - Greedy Algorithms
  - Dynamic Programming
  - Graph Algorithms
  - Pattern Searching
  - Recursion
  - Backtracking
  - Divide and Conquer
  - Mathematical Algorithms
  - Geometric Algorithms
  - Bitwise Algorithms
  - Randomized Algorithms
  - Branch and Bound
  - Algorithms Tutorial
- DSA Tutorial
- Practice
  - All DSA Problems
  - Problem of the Day
  - Company Wise Coding Practice
  - GfG SDE Sheet
  - Practice Problems Difficulty Wise
  - Language Wise Coding Practice
  - Curated DSA Lists
- Competitive Programming
- Company Wise SDE Sheets
- DSA Cheat Sheets
- Top Interview Questions
- Puzzles
Data Science
- Python Tutorial
- R Tutorial
- Machine Learning
- Data Science using Python
- Data Science using R
- Data Science Packages
  - Pandas Tutorial
  - NumPy Tutorial
- Data Visualization
  - Python Data Visualization Tutorial
  - Data Visualization with R
- Data Analysis
  - Data Analysis with Python
  - Data Analysis with R
- Deep Learning
- NLP Tutorial
Web Tech
- HTML Tutorial
- CSS Tutorial
- JavaScript Tutorial
- PHP Tutorial
- ReactJS Tutorial
- NodeJS Tutorial
- AngularJS Tutorial
- Bootstrap Tutorial
- Typescript
- Web Development Using Python
- Wordpress Tutorial
- Web Design
- Cheat Sheets
- Learn Complete Web Development
Courses
- Coding for Everyone
- DSA to Development
- Machine Learning & Data Science
- Generative AI & ChatGPT
- Become AWS Certified
- DSA Courses
- Programming Languages

Open In App

Last Updated : 23 Jan, 2024

Summarize

Comments

Improve

Suggest changes

Like Article

Save

Report

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"

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:

aksrathod07

Improve

How to create a Reset Button in form using HTML ?

Please Login to comment...

Similar Reads

How to reset a form using jQuery with .reset() method?

Resetting a form using jQuery with the .reset() method means restoring the form's fields to their initial values. This can be achieved by triggering the form's native reset function through jQuery, effectively clearing any user input or selections, and returning the form to its original state. Syntax$('element_selector')[0].reset(); OR$('element_se

2 min read

How to create a Reset Button in form using HTML ?

In this article, we will learn how to create a Reset Button in HTML forms. The reset button is used to reset all the form data values and set them to their initial default value. In case of user enters the wrong data then the user can easily correct it by clicking on the "Reset Button". Syntax:<input type="reset">Approach: First, we have to

1 min read

How to exclude HTML form radio button values from being submitted using jQuery ?

Given an HTML form with form elements including some radio button values, the task is to exclude these values from being submitted using jQuery. There is one main approach that can be followed. Approach: Use this property and submit(), find(), and prop() methods in jQuery. We apply the submit() method to the form which means that the script inside

3 min read

HTML | DOM Form reset() Method

The Form reset() method in HTML DOM is used to reset all the value of form elements and use the default value. This method works as a reset button. It does not contain any parameters. Syntax: formObject.reset() Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; HTML DOM Form reset() Met

1 min read

HTML | DOM Input Reset form Property

The Input Reset form Property in HTML DOM is used for return the reference of the form containing the input reset button field. It is read-only property. Syntax: resetObject.form Return Values: It returns a string value which specify the reference of the form containing the Input reset field Below example illustrates the Input reset form property.

1 min read

How to clear form after submit in Javascript without using reset?

Forms in JavaScript serve to gather specific user information, essential in various contexts like recruitment or inquiry submissions. While offline forms can be freely distributed, online forms must maintain a consistent structure for all users. After filling out a form, submission is crucial, but designers also tackle post-submission actions, such

2 min read

How to trigger HTML button after hitting enter button in textbox using JavaScript ?

In this article, we are given an HTML document containing a text area and the task is to trigger the button when the user hit Enter button. We can do it by using the "keyup", "keydown", or "keypress" event listener on the textbox depending on the need. When this event is triggered, we check if the key pressed is ENTER or not. If the key pressed is

4 min read

How To Reset a React-Bootstrap Form After Submit?

Forms are one of the most useful elements in web applications. It allows users to input their credentials and submit those data. There are many types of forms present (User Registration, Login, Feedback Form etc). In this article, we will see how to reset a React-Bootstrap Form after submission. PrerequisitesJavaScriptReact-BootstrapReact BasicsRea

3 min read

HTML | DOM Input Reset Object

The Input Reset Object in HTML DOM is used to represent the HTML <input> element with type="reset". This tag is used to access or create the <input> element. This element can be accessed by using getElementById() method. Syntax: document.getElementById("Input_ID"); This Input_ID is assigned to HTML <input> element. Example-1: Crea

2 min read

HTML | DOM Input Reset name Property

The Input Reset name Property in HTML DOM is used to set or return the value of name attribute of a reset field. The name attribute is required for each input field. If the name attribute is not specified in an input field then the data of that field would not be sent at all. Syntax: It returns the Input reset name property.resetObject.nameIt is us

2 min read

HTML | DOM Input Reset type Property

The Input Reset type Property in HTML DOM is used to return the type of form element of the reset field. It always returns the "reset" for an Input reset field. Syntax: resetObject.type Return Value: It returns a string value that represents the type of form element the Input reset field is. Below program illustrates the reset type property in HTML

1 min read

HTML | DOM Input Reset disabled Property

The Input Reset disabled Property in HTML DOM is used to set or return a boolean value which represents a reset button field should be disabled or not. By default, the disabled elements are shown in gray and are unusable and unclickable. Syntax: It returns the disabled property.resetObject.disabledIt is used to set the disabled property.resetObject

2 min read

HTML | DOM Input Reset value Property

The Input Reset value Property in HTML DOM is used to set or return the value of the value attribute of a Input reset Field. The value attribute specifies the text displayed in the reset Field. Syntax: It returns the Input Reset value Property.resetObject.valueIt is used to set the Input Reset value Property.resetObject.value = text Property Value:

2 min read

HTML | DOM Input Reset autofocus Property

The Input Reset autofocus Property in HTML DOM is used to set or return whether the Input reset Field should get focus or not when the page loads. It reflects the HTML autofocus attribute. Syntax: It returns the autofocus property.resetObject.autofocusIt is used to set the autofocus property.resetObject.autofocus = "true|false" Property Values: tru

2 min read

HTML | DOM Input reset defaultValue Property

The Input reset defaultvalue Property in HTML DOM is used to set or return the default value of a reset field. This property is used to reflect the HTML value attribute. The main difference between the default value and value is that the default value indicates the default value and the value contains the current value after making some changes. Th

2 min read

HTML <input type=”reset">

HTML <input type="reset"> defines a button that resets form fields to their default values when clicked, allowing users to clear input data easily. HTML <input type=”reset”> Syntax:<input type="reset">HTML <input type=”reset”> Example:In this example, we are using a basic implementation of the input reset type. C/C++ Code

2 min read

How to create a radio button similar to toggle button using Bootstrap ?

Toggle Buttons: The buttons that can change from one state to another, i.e. which can be toggled from on state to off state or vice-versa are called toggle buttons. For example: A particular switch in our house can either be on or off. This is a very good example of a real life toggle switch. The WiFi or Bluetooth option in our phone is another exa

3 min read

How to Reset an Input Value when Limit Exceeds using AngularJS ?

The task is to handle an input field if the number entered by the user in the input exceeds some limit using angularJS. We define a limitTo directive and use it on an HTML input element. This directive is used for all the handling of overflowing limits. The directive calls a function on the keypress event where we can check for the limits. Example

2 min read

How to reset selected value to default using jQuery?

Resetting a selected value to its default in a dropdown or select element is a common requirement in web development to enhance user experience. jQuery, a popular JavaScript library, simplifies this task by providing easy-to-use methods for manipulating DOM elements. By using jQuery, you can quickly reset the selected value of a dropdown to its ini

3 min read

How to reset input type = "file" using JavaScript/jQuery?

To reset an <input type="file"> using JavaScript/jQuery means clearing the selected file, effectively resetting the input field. This is useful when users need to reselect a file or when a form reset is required without reloading the entire webpage. These are the following ways: Table of Content Using the wrap method in jQueryUsing file.value

2 min read

How to submit a form without using submit button using PHP ?

In this article, we will see how to submit the form without clicking the submit button, along with understanding the different ways to accomplish this task through implementation. The form can be submitted without using submit button by implementing a specific event attribute or by clicking the link. This task can be done by using the OnClick event

3 min read

How to Convert HTML Form Field Values to JSON Object using JavaScript?

Storing HTML input data into JSON format using JavaScript can be useful in various web development scenarios such as form submissions, data processing, and AJAX requests. Here we will explore how to convert the HTML form input data into the JSON format using JavaScript. ApproachThe HTML file contains a form with input fields for name, email, and me

2 min read

HTML | DOM Input Button form Property

The DOM Input Button form Property in HTML DOM is used for returning the reference to the form containing the input Button field is. It is read only property that returns a form object on success. Syntax: buttonObject.form Return Values: It returns a string value which specify the reference of the form containing the Input Button field. Example: Be

1 min read

HTML | <button> form Attribute

The HTML <button> form Attribute is used to specify the one or more forms that the <button> element belongs to. Syntax: <button form="form_id"> Attribute Values: form_id: It Contains the value i.e form_id which specify the one or more than the button element belongs to. The value of this attribute should be id of the <form>

1 min read

HTML DOM Button form Property

The Button form property in HTML DOM is used to return the reference of the form containing the button. It is a read-only property and returns the form object on success. Syntax: buttonObject.formReturn Value: It returns a reference to the form element containing the button. It returns NULL if the button is not in the form. Example: This example

1 min read

How to Create Form Submit Button in HTML ?

In HTML, the form submit button is an important element in sending the user's data to the server for further processing. We can create these buttons using two different approaches like <input> or <button> tag. Table of Content Using <button> tag Using <input> tag Using <button> tag In this approach, we are using the

3 min read

How to add more values to array on button click using PHP ?

In this article, we will learn to add elements to an existing array with the click of a button using PHP. PHP is a server-side language, and it only responds to requests (GET, POST, PUT, PATCH, and DELETE). The button click action happens as a part of the client-side to directly call a PHP function. We need an intermediary language to perform this

3 min read

How to calculate the sum of radio button values using jQuery ?

In this article, we will see how to calculate the sum of radio button values using jQuery. To add the values of radio buttons, we will use the addition arithmetic operator. Approach: First, we will use radio buttons to select two numbers i.e. number1 and number2. If the user clicks on the radio button value, then the user selects the value and gets

2 min read

button tag vs input type="button" attribute

The <input type="button"> and <button> tag are two different approach to use Button in HTML document. The difference between them is that the buttons created with the <button> tag offer many contributing possibilities than <input type="button"> attribute. The <button> can have content inside it. The <button> tag

2 min read

How to set radio button checked by button click in AngularJS ?

In this article, we will see how to set the radio button checked by button click in AngularJS, along with knowing its implementation through the examples. Approach: The approach is to use the ng-checked directive to check the radio button in the DOM. In the first example, a single radio button is checked by the button and In the second example, mul

2 min read

Article Tags :

Trending in News

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id, }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.unlocked-status--improve-modal-content').css("display","none"); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); return; } var improvement_reason_html = ""; for(var comment of commentArray) { // loop creating improvement reason list markup var comment_id = comment['id']; var comment_text = comment['suggestion']; improvement_reason_html += `

${comment_text}

`; } $('.improvement-reasons_wrapper').html(improvement_reason_html); $('.improvement-bottom-btn').html("Create Improvement"); $('.improve-modal--improvement').hide(); $('.improvement-reason-modal').show(); }, error: function(e){ $('.spinner-loading-overlay:eq(0)').remove(); // stop loader when ajax failed; }, }); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); } else { if(loginData && !loginData.isLoggedIn) { $('.improve-modal--overlay').hide(); if ($('.header-main__wrapper').find('.header-main__signup.login-modal-btn').length) { $('.header-main__wrapper').find('.header-main__signup.login-modal-btn').click(); } return; } } }); $('.left-arrow-icon_wrapper').on('click',function(){ if($('.improve-modal--suggestion').is(":visible")) $('.improve-modal--suggestion').hide(); else{ $('.improvement-reason-modal').hide(); } $('.improve-modal--improvement').show(); }); function loadScript(src, callback) { var script = document.createElement('script'); script.src = src; script.onload = callback; document.head.appendChild(script); } function suggestionCall() { var suggest_val = $.trim($("#suggestion-section-textarea").val()); var array_String= suggest_val.split(" ") var gCaptchaToken = $("#g-recaptcha-response-suggestion-form").val(); var error_msg = false; if(suggest_val != "" && array_String.length >=4){ if(suggest_val.length <= 2000){ var payload = { "gfg_post_id" : `${post_id}`, "suggestion" : `

${suggest_val}

`, } if(!loginData || !loginData.isLoggedIn) // User is not logged in payload["g-recaptcha-token"] = gCaptchaToken jQuery.ajax({ type:'post', url: "https://apiwrite.geeksforgeeks.org/suggestions/auth/create/", xhrFields: { withCredentials: true }, crossDomain: true, contentType:'application/json', data: JSON.stringify(payload), success:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-section-textarea').val(""); jQuery('.suggest-bottom-btn').css("display","none"); // Update the modal content const modalSection = document.querySelector('.suggestion-modal-section'); modalSection.innerHTML = `

Thank You!

Your suggestions are valuable to us.

You can now also contribute to the GeeksforGeeks community by creating improvement and help your fellow geeks.

`; }, error:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Something went wrong."); jQuery('#suggestion-modal-alert').show(); error_msg = true; } }); } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Minimum 5 Words and Maximum Character limit is 2000."); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Enter atleast four words !"); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } if(error_msg){ setTimeout(() => { jQuery('#suggestion-section-textarea').focus(); jQuery('#suggestion-modal-alert').hide(); }, 3000); } } document.querySelector('.suggest-bottom-btn').addEventListener('click', function(){ jQuery('body').append('

'); jQuery('.spinner-loading-overlay').show(); if(loginData && loginData.isLoggedIn) { suggestionCall(); return; } // load the captcha script and set the token loadScript('https://www.google.com/recaptcha/api.js?render=6LdMFNUZAAAAAIuRtzg0piOT-qXCbDF-iQiUi9KY',[], function() { setGoogleRecaptcha(); }); }); $('.improvement-bottom-btn.create-improvement-btn').click(function() { //create improvement button is clicked $('body').append('

'); $('.spinner-loading-overlay').show(); // send this option via create-improvement-post api jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.improvement-reason-modal').hide(); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); });