Procesar un formulario sin recarga con HTML.
Resumen.
En tiempos, todos los formularios se procesaban un una nueva página, luego, con las librerías jquery de javascript se empezaron a procesar los formularios sin recargar la página, pero ¿sabes que esto también se puede hacer de manera muy simple en HTML?Artículo.
El esquema tradicional de procesar un formulario, que como sabemos se escriben en HTML, es enviar los datos a una nueva página, por ejemplo usando el método POST, algo así como esto:
Como el salto de una página a otra resulta digamos, incómodo o feo, ahora lo que se hace es cargar la página que procesa el formulario en una capa CSS, lo que implica el uso de una librería jquery como por ejemplo jquery.min.js y un poco de javascript. Si bien el resultado que esto ofrece es muy elegante y funciona muy bien, requiere aparte de la propia librería, unas cuantas líneas de código, y si eres amigo de minimizar el uso de estas librerías para agilizar tu Web, quizás te interese prescindir de javascript. Hacer esto es muy fácil.
Personalmente, hace bastantes años era muy amigo de usar javascript a las primeras de cambio, poco a poco he ido buscando formas de hacer prescindir de él. Así, se me ocurrió usar la iframe como “lugar” para procesar los formularios, tan sencillo como esto:
De manera predeterminada, la iframe carga un archivo “en blanco”, que no es más que una página sin contenido alguno, y parece que no hay nada cuando accedemos al formulario, y cuando pulsamos enviar, aparece entonces el resultado del envío del formulario. Y todo esto, con la máxima simplicidad del código html.
El atributo “target” del formulario tomará el nombre de la ventana iframe, y esto es todo, ya solo queda darle a la iframe los valores que considere más oportunos. Más sencillo, imposible.
Donde la pagina procesar.php recoge los datos procedentes del formulario para realizar con ellos la acción que precisemos. Esto supone que iniciamos la acción por ejemplo en la página formulario.htm, y al pulsar el botón enviar, nos lleva a la página procesar.php.<form method="POST" action="procesar.php" name="nombre_form">
Como el salto de una página a otra resulta digamos, incómodo o feo, ahora lo que se hace es cargar la página que procesa el formulario en una capa CSS, lo que implica el uso de una librería jquery como por ejemplo jquery.min.js y un poco de javascript. Si bien el resultado que esto ofrece es muy elegante y funciona muy bien, requiere aparte de la propia librería, unas cuantas líneas de código, y si eres amigo de minimizar el uso de estas librerías para agilizar tu Web, quizás te interese prescindir de javascript. Hacer esto es muy fácil.
Personalmente, hace bastantes años era muy amigo de usar javascript a las primeras de cambio, poco a poco he ido buscando formas de hacer prescindir de él. Así, se me ocurrió usar la iframe como “lugar” para procesar los formularios, tan sencillo como esto:
Y bajo el formulario colocamos una iframe como esta:<form method="POST" action="procesar.php" target="procesa" name="nombre_form" />
Y con esto, ya tenemos nuestro formulario “sin recarga de pagina”, y lo pongo entre comillas, por que en realidad siempre se carga un archivo, si es mediante las librerías jquery, se carga en un “id” de CSS, y en este caso, en una ventana iframe.<iframe src="en_blanco.htm" marginwidth="0" marginheight="0" name="procesa" scrolling="no" border="0" frameborder="0" width="600" height="150"> </iframe>
De manera predeterminada, la iframe carga un archivo “en blanco”, que no es más que una página sin contenido alguno, y parece que no hay nada cuando accedemos al formulario, y cuando pulsamos enviar, aparece entonces el resultado del envío del formulario. Y todo esto, con la máxima simplicidad del código html.
El atributo “target” del formulario tomará el nombre de la ventana iframe, y esto es todo, ya solo queda darle a la iframe los valores que considere más oportunos. Más sencillo, imposible.
Tags: target || iframe || formularios || procesar