Form básico de html
Es la forma más sencilla de implementar un formulario en html. Es rápido de desarrollar y sencillo para probar.
<form action="process.php" method="post">
Nombre: <input name="fname" type="text" />
<input type="submit" value="Submit" />
</form> |
Al darle clic al botón submit el navegador dirige al usuario a la página process.php. En php se obtiene la información del formulario consultando, en el caso del ejemplo, la variable $_POST ya que se indicó que el método de envío del formulario es post.
Con esta manera el botón de submit es estándar pero el mismo puede modificarse un poco con css.
Form básico con imágen para submit
Esta es una pequeña variante del método anterior. En lugar de utilizar el botón de submit algunos diseños requieren una mayor personalización. Lo mejor en estos casos es utilizar la etiqueta a en lugar del input de tipo submit.
Esta alternativa presenta algunos cambios. Se debe agregar un identificador al formulario para facilitar la búsqueda del mismo. El atributo href del link se indica como # para evitar que el navegador dirija al usuario a otra página antes de ejecutar el código javascript. Como puede notarse se requiere del uso de javascript para ejecutar la acción de submit cuando se omite el botón estándar.
Form con imágen para submit + ajax
La capacidad de controlar el envió de un formulario con javascript nos conduce a la siguiente mejora, usar ajax. Con esto no es necesario redireccionar al usuario a otra página. Ajax además es la tecnología que nos permite contar con aplicaciones web. Para esto se hará uso de jQuery.
El html solo requiere que se le asigne un identificador al link que se utilizará como botón de envío, el resto se realizará con javascript.
<script type="text/javascript">// <![CDATA[ $(document).ready(function() { $("#submit").click(function() { $.post("process.php", $("#formulario").serialize(), function(data) { //data es la respuesta del servidor }); }); }); // ]]></script> |
El script hace tres cosas. Se asegura de ejecutarse cuando el documento esté listo. Asigna al botón de envío el código para ejecutar el llamado de ajax. Envía al php correspondiente la información del formulario y recibe los datos que retorna el script de php que procesa la información.
Con esto se le puede dar una mejor experiencia a quienes visitan nuestro sitio y diseñar los formularios de manera creativa y personalizada.
Gracias la forma “javascript:getElementById(‘formulario’).submit();” me sirvio bastante 😀
Hola.
Quisiera saber cómo hacer que un botón haga 2 cosas a la vez:
1. Enviar formulario [submit]
2. Al hacer clic en el botón, y enviar la info, también quiero que enlace en una ventana nueva una URL cualquiera. No sé cómo hacerlo, o si es con href…
Agradezco tu ayuda.
Saludos.
Hola, gracias por pasar por acá
Eso se podría hacer con el método “Form básico de html”, al hacer submit, en el process.php (este archivo se ejecuta en el servidor) se procesa la información y se retorna un http redirect:
header(“Location: http://example.com/myOtherPage.php“);
En el ejemplo no indico como sería el process.php, si es esto lo que ocupa me lo indica por favor
Esto se haría en un sitio sin gestor de contenidos, si usas wordpress por ejemplo sería más práctico usar un plugin para formularios
Saludos