Muchos sitios web utilizan formularios para permitir a los usuarios pasar por sus programas y funciones. Como resultado, algunas personas pueden querer que se borre su información personal después de pulsar el botón «enviar». Otros pueden tener problemas con la función de autocompletar, ya que puede estropear sus envíos.
Sea como sea, hay soluciones rápidas que puedes aplicar utilizando un par de líneas de HTML. La clave está en aplicar el método que te parezca más cómodo. También puedes optar por aplicar cualquiera de estos métodos en función de lo que necesiten tus sitios web.
Antes de pasar a las soluciones reales, me gustaría dar las gracias a TestDinBolig.dk y Led-strips.dk por hacer realidad esta guía.
La solución «Autocompletar desactivado
Como con cualquier cosa relacionada con HTML, ayuda encontrar primero las soluciones más básicas. En este caso, viene en forma de un sencillo formulario que incluye unas pocas líneas para eliminar la funcionalidad de «autorrelleno» presente en la mayoría de los sitios web.
Aunque puede ser cómodo para los perezosos a los que no les gusta rellenar formularios, también puede ser un coñazo para los programadores de HTML. Estas funcionalidades hacen que restablecer los formularios sea casi inútil, ya que el formulario simplemente autocompleta los datos para el usuario.
Aquí tienes un ejemplo que elimina la función de autocompletar.
Nombre de usuario:
Correo electrónico:
Si te fijas bien, verás que esta solución es muy sencilla. Incluye un autocomplete=»off» ton eliminar la función de autocompletado. Con esto en su lugar, ya no habrá ningún detalle autocompletado cada vez que un usuario rellene el formulario. Si lo que prefieres para tu proyecto es eliminar cualquier violación de la privacidad, ésta puede ser una herramienta muy útil.
Ten en cuenta que autocompletar=»desactivado» es opcional. La mayoría de la gente prefiere que se autocompleten sus datos por comodidad. Después de todo, resulta cansado introducir de vez en cuando tu nombre completo, dirección de correo electrónico, domicilio y otros datos personales. Pero si lo que más te preocupa es la privacidad y la eliminación de datos, eliminar el autorrelleno es una solución rápida.
Usar Ajax para restablecer los envíos de formularios
Si quieres ir más allá de las líneas de comandos HTML básicas, también puede haber soluciones mediante diversas técnicas AJAX. Aquí tienes las más utilizadas:
Utilizar un formulario HTML mediante AJAX
Nombre:
Correo electrónico:
En las líneas anteriores, verás que el formulario HTML utiliza AJAX para los envíos. Al igual que en el ejemplo anterior, no hay mucho de lo que preocuparse si eres principiante.
Sin embargo, hay algunos fragmentos de código cruciales que debes recordar:
En este caso, el campo no quedará en blanco. En su lugar, mostrará «John Smith», y también puedes configurar los marcadores de posición para que utilicen otros nombres. Por ejemplo, también puedes incluir «John Doe» o «Jane Smith».
Esto es útil si quieres dejar un ejemplo para un campo antes de que el usuario lo rellene.
Sin embargo, en este caso, el campo de correo electrónico se restablecerá en blanco tras el envío. Esta línea es el camino a seguir si quieres eliminar todo rastro de direcciones de correo electrónico al finalizar. Al igual que las contraseñas, las direcciones de correo electrónico también deben protegerse.
Utilizar métodos Javascript
función proceso () {
// (A) OBTENER DATOS DEL FORMULARIO
var form = document.getElementById(«mi-formulario»);
var data = nuevo FormData(form);
// (B) ENVIAR FORMULARIO AJAX
// NOTA: UTILIZA HTTP://. NO FILE://.
var xhr = nuevo XMLHttpRequest();
xhr.open(«POST», «0-dummy.html»);
xhr.onload = function () {
console.log(esta.respuesta);
form.reset(); // REINICIAR FORMULARIO
};
xhr.send(datos);
// (C) DETENER EL ENVÍO POR DEFECTO DEL FORMULARIO/RECARGA DE LA PÁGINA
devuelve falso;
}
Javascript puede ser mucho más difícil de entender para los principiantes. En este caso, el envío del formulario se produce de una forma única. El envío del formulario se produce sin actualizar la página, utilizando plenamente el mecanismo AJAX.
Por cierto, si te preguntas qué significa AJAX, significa Javascript Asíncrono y XML. Es un trabalenguas, pero si lo lees con atención sabrás exactamente para qué sirve.
Ahora, a lo esencial. Para poner esto en práctica, sigue los pasos siguientes.
Lo primero que tienes que hacer es obtener el formulario HTML:
var form = document.getElementById(«mi-formulario»).
Después, recoge los datos del formulario:
var data = nuevo FormData(form).
A continuación, elabora la petición AJAX:
var xhr = nuevo XMLHttpRequest().
Ahora, asegúrate de prestar mucha atención al «xhr.onload». Esta línea contiene una parte crucial de la programación necesaria para enviar el formulario. Cuando se ejecuta, el formulario se envía, y el servidor te hará saber que ha recibido los datos.
Es muy importante tener esto en cuenta a la hora de crear un formulario que sea infalible y eficaz.
Restablecer parcialmente el formulario
Si quieres que sólo se desocupe una parte del formulario, hay una forma de hacerlo. Lo que puedes hacer es emplear algunas líneas de HTML que especifiquen qué partes del formulario deben despejarse.
Una de las mejores formas de hacerlo es mediante el siguiente ejemplo:
Correo electrónico:
Contraseña:
Confirma la contraseña:
Este formulario te dará un formulario HTML convencional. Pero esta vez, elimina los campos de contraseña. El campo de correo electrónico conserva la información introducida por el usuario. De este modo, se mantiene la comodidad sin comprometer la privacidad y los datos personales.
Utilizar Javascript para Parcial
función proceso () {
// (A) OBTENER DATOS DEL FORMULARIO
var data = new FormData(document.getElementById(«mi-formulario»));
// (B) ENVIAR FORMULARIO AJAX
var xhr = nuevo XMLHttpRequest();
xhr.open(«POST», «0-dummy.html»);
xhr.onload = function () {
console.log(esta.respuesta);
// REARME MANUAL
document.getElementById(«usuario-contraseña»).value = «»;
document.getElementById(«confirmar-contraseña»).value = «»;
};
xhr.send(datos);
// (C) DETENER EL ENVÍO POR DEFECTO DEL FORMULARIO/RECARGA DE LA PÁGINA
devuelve falso;
}
En estas líneas de código, verás que es muy similar a otros procesos AJAX. Sin embargo, restablecer sólo una parte de los formularios requerirá algunos cambios en algunas de estas líneas. Por eso, los campos deben configurarse manualmente, restableciendo los valores individualmente.
Conclusión sobre cómo borrar los datos del formulario después de enviarlo
En definitiva, restablecer los datos del formulario tras el envío es un proceso que requiere algunos retoques con HTML. Sea cual sea el modo que elijas implementar, asegúrate de probarlo para evitar errores. Intenta realizar varias pruebas con varios usuarios antes de lanzar el proyecto.
Lee también Guía de Temas Destacados sobre Cómo Centrar un Vídeo en HTML
