<form id="form">
<input type="text" name="name" />
</form>
<button type="submit" form="form">Send</button>¿Cómo funciona?
El atributo form="form" en el botón indica a qué formulario pertenece, aunque no esté ubicado dentro del mismo bloque <form>.
Esto es posible porque en HTML5, los controles de formulario (como input, button, select, etc.) pueden estar fuera del formulario siempre que estén vinculados a él mediante el atributo form.
¿Cuándo usarlo?
- En diseños donde el botón de envío está en un footer global o fuera de un componente de formulario.
- Cuando se está usando composición de componentes en frameworks como React, Vue, etc.
- Para formularios dinámicos, donde se manipulan los elementos vía JavaScript y es más práctico separar visualmente los botones.
Este pequeño truco puede simplificar mucho la estructura de tu HTML sin sacrificar funcionalidad. Ideal para layouts personalizados sin perder la semántica del formulario.