How to clear all form fields in HTML

In this article we’ll learn how to clear all form fields in HTML, without JavaScript, just using an input type from HTML5 forms

What’s up programmers, okay? Let’s learn something new!

Clearing out form fields can be done easily with JavaScript

But when native functionality is added to the language, as in the case in HTML

We should opt for them so that we will not pollute the code that much and it will probably run faster

So let’s learn how to clean fields, just with HTML, see the code:

<form>
 <div>
  <input type="email" name="email" required>
 </div>
 <div>
  <input type="password" name="password" required>
 </div>
 <div>
  <input type="submit" value="Send">
  <input type="reset" value="Reset">
 </div>
</form>

Note that in this form we use an input with a type of reset

The reset has this function to clear all fields or return them to the default value

The default value would be whatever is in the field’s value attribute.

For example, if it was a user edit form, it would return the data to what was taken from the backend

As our inputs are empty in the value attribute, simulating a login form, the fields are empty

So we just click on this input for the action to be performed

Conclusion

In the article we learned  that we can reset the value of the fields, with an input with the type set to reset

This input will be a button, like submit, but it will change the values to default

Default is what is in the value attribute, that is, if it is empty the inputs are reset

Want to learn more about HTML? Click here!