¡Hola a todos! mi nombre es Daniel Correa y hoy os traigo algo que seguro que no conocías de HTML. Apuesto a que más de una vez te has encontrado con la necesidad de utilizar javascript para realizar el envío (submit) de un formulario mediante un botón que se encuentra fuera de la etiqueta <form> de un formulario. Pues te traigo la solución para hacer un form submit, con un button fuera de un formulario en HTML, sin Javascript.
Verás que es de lo más sencillo, para ello utilizaremos un atributo que seguro que no conocías pero que a partir de ahora vas a usar y ¡mucho!. Sigue leyendo para explicarte cómo.
Cuando nos encontramos diseñando o programando alguna web, más de una vez nos encontramos ante esta necesidad. Tenemos un formulario con todos sus campos y tenemos un «button» para el «submit» (envío) que se encuentra fuera de las etiquetas «<form></form>» del formulario. Y, como yo, seguro que has recurrido mil veces a javascript para realizar esta acción.
¡Pues esto se acabó! Vamos a realizar el sumbit de un form con un button fuera del formulario.
Para ello vamos a utilizar el atributo «form» dentro del botón. ¿Lo conocías? Te dejo un ejemplo para que lo puedas ver.
<form id="contact-form" action="/submit">
<label>Input de formulario:</label>
<input type="text" name="mensaje" required>
<!-- Resto de campos del formulario -->
</form>
<button form="contact-form" type="submit">
Enviar formulario
</button>En el código podemos ver el ejemplo de un formulario con sus campos y fuera del formulario tenemos el botón que va a realizar la acción de submit. Si nos fijamos detenidamente , en este button hemos añadido el atributo form, al cual le tenemos que indicar la id del formulario que queremos que se envíe. ¡Sencillo! ¡Ya lo tenemos! Y sin necesidad de utilizar JavaScript.
¿Para que es útil hacer un form con el button fuera del formulario? Utilidad del atributo form dentro de button.
Hacer un form submit con un button fuera del formulario es muy útil y práctico, se me ocurren algunos casos:
- Diseños nada convencionales: en casos en que por cuestiones de diseño el botón de envío se encuentra muy alejado en el código, del formulario.
- Clean Code: para una mejor estructura y limpieza del código HTML.
- Componentes reutilizables con contenido dinámico: cuando tenemos un mismo código que queremos reutilizar, podemos cambiar dinámicamente el atributo form.
- Ahorrar muchas lineas de código y tiempos de carga: evitando el uso de javascript (ya sabemos que un uso excesivo puede penalizar nuestra velocidad de carga).
¿Se te ocurren más casos? Seguro que sí, cuéntame en comentarios más casos en los que podrás necesitarlo. Te invito a que lo pruebes y te costumbres a usarlo. Si hasta ahora no lo has tenido que utilizar nunca, no te preocupes, tu momento llegará. Créeme hasta hace poco yo tampoco conocía este atributo y no sabes cuanto código innecesario me podría haber ahorrado.
¿Lo conocías? ¿Ya hacías uso de el?
No salgo de mi asombro al ver como algo tan simple no es conocido por todos, incluso personas que llevan dedicándose a esto muchos años, se sorprenden al ver cómo con una simple línea o un simple paso, se pueden ahorrar muchos quebraderos de cabeza. ¡A mí también me pasa! Y esto es porque hay muchos detalles o funcionalidades que pasamos por alto sin darnos cuenta, por ejemplo este uso lo puedes encontrar en W3schools.
¿Te ha gustado este truco HTML? Te leo en comentarios. Y recuerda si tienes alguna pregunta o necesitas más información, no dudes en escribirme. ¡Estoy aquí para ayudarte en tu viaje hacia el desarrollo web! Hasta la próxima….
