Asociar un botón a cualquier formulario con HTML5

Quizás uno de los nuevos atributos de HTML5 que nos haya pasado por alto, aunque es de gran utilidad, es el atributo form del elemento button. Esto nos va a permitir asociar un botón a cualquier formulario con HTML5.

Es decir, independientemente de dónde tengamos el formulario y dónde tengamos el botón dentro de la estructura de nuestra página, podremos asociarlos para que funcionen de manera conjunta. Y es que hasta la especificación de HTML5 los botones quedaban asociados al formulario padre en el que se encontrasen ubicados. Complicando bastante la forma en la que diseñábamos los formularios y disponíamos los botones, llevándonos a realizar diseños peculiares. Además, a esto se sumaba la imposibilidad de anidar formularios que nos habría ayudado a colocar los elementos.

Crear un formulario básico

Para explicarlo lo primero que necesitamos es un formulario. Crearemos un simple formulario con el elemento form que contenga una descripción o etiqueta mediante el elemento label y un campo de entrada definido con un elemento input.

<form id="miformulario" action="send" method="post">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre">
</form>

Como podemos ver el formulario se envía vía POST a un servicio que hemos llamado “send”.

Añadir un botón al formulario

Si queremos enviar el formulario tendremos que añadir un botón, ya sea un botón del elemento button o un input de tipo “button”. Este botón se añade dentro del elemento del formulario, es decir, dentro del form.

<form id="miformulario" action="send" method="post">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre">
  <button type="submit">Enviar</button>
</form>

Utilizar el atributo form

Pero ahora ya podemos asociar un botón a cualquier formulario con HTML5. Para ello tenemos que saber que el elemento button tiene un atributo que se llama form. Este atributo puede contener el ID de cualquier formulario de nuestra página, es decir, del valor que hayamos asociado al atributo id del formulario.

En nuestro ejemplo el formulario que creamos tenía un atributo id al cual dimos un valor de “miformulario”. Es por ello que podremos crear el botón en cualquier parte de nuestra página de la siguiente forma:

<button type="submit" form="miformulario">Enviar Formulario</button>

Atributos formaction y formmethod

Pero el atributo form no es el único que nos da capacidades de asociar un botón a cualquier formulario con HTML5, sino que encontramos otros atributos como formaction o formmethod que nos permiten cambiar el destino del formulario y la forma de envío desde el propio botón.

Es decir, podríamos indicar ahora que la petición es de tipo GET y que se envía a un servicio que denomimaremos “enviar.php”. Una potencia enorme a la hora de crear botones asociados a formularios. En este caso el código quedaría de la siguiente forma:

<button type="submit" form="miformulario" formaction="enviar.php" formmethod="get">Enviar con GET</button>

Espero que hayas aprendido como asociar un botón a cualquier formulario con HTML5 mediante el atributo form y otras capacidades extra que nos ofrecen los atributos formaction o formmethod.