Limpiar un formulario con Java Script

Java Script y HTML son dos lenguajes de programación fundamentales para desarrollar un sitio web moderno y sencillo. Es por ese motivo que en esta ocasión aprenderemos una simple técnica para limpiar un formulario con Java Script.

La necesidad de limpiar un formulario con Java Script

Especialmente en formularios con muchos campos para completar siempre es muy útil para los usuarios tener la opción de limpiar o reiniciar el formulario, esto va ahorrarle al usuario realizar ese trabajo molesto, ya que en muchos casos podría dejar de visitar el sitio.

Cómo reiniciar o limpiar un formulario con Java Script

Para realizar esta tarea vamos a necesitar un formulario en HTML. Para este caso vamos a realizar uno muy simple, con dos campos de textos y dos botones (uno para enviar el formulario y el otro para limpiar el formulario).

<form id="miForm" action="action_page.php">
    Nombre:<br>
    <input type="text" name="nombre"><br>
    Apellido:<br>
    <input type="text" name="apellido"><br><br>
    <input type="button" onclick="limpiarFormulario()" value="Limpiar formulario">
    <input type="submit" value="Submit">
</form>

En el código del formulario se puede ver que el botón de tipo button va a ejecutar la función Java Script limpiarFormulario() cuando se haga click. Esa función va a ser la encargada de reiniciar el formulario:

<script>
  function limpiarFormulario() {
    document.getElementById("miForm").reset();
  }
</script>

Esta misma funcionalidad se puede realizar de otra forma mucho más sencilla, compatible con navegadores HTML5 y sin utilizar Java Script. Siguiendo con el código anterior solamente debemos cambiar el tipo del botón por reset y obviamente quitar la función onclick:

<input type="reset" value="Limpiar formulario">

Bueno gente, esto es todo. Espero que les haya sido de gran utilidad este breve tutorial en el cual explicamos cómo limpiar un formulario con Java Script. Ante cualquier inconveniente no dude en enviar un comentario.