HTML button
En los formularios se puede usar un control input con atributo type="submit" para enviar los datos mediante el campo action. Incluso existe un type="button" para ejecutar una tarea no específica (normalmente lanzar un script)
Pero HTML posee otro tipo de control muy similar aunque más flexible. Se trata de un botón interactivo que se crea mediante la etiqueta <button></button> destinado a ser pulsado por el usuario y que es más versátil en el aspecto visual y de estilos.
Etiqueta <button>
La etiqueta <button> de HTML se utiliza para crear botones interactivos en una página web que pueden ser pulsados por el usuario como un botón.
La función más inmediata es ligarlo a un formulario y pulsar sobre el para enviar los datos del formulario como con un input type="submit".
Estos botones permiten a los usuarios realizar acciones como enviar formularios, ejecutar scripts o interactuar con otros elementos de la página.
La diferencia con los controles input está en el diseño. Este elemento admite en su contenido no solo un texto a modo de etqiueta sino que acepta código HTML. Puede mostrarse como una imagen o como un icono por ejemplo. Lo que no puede contener es un enlace (<a></a>).
Los elementos <button> aceptan diferentes valores para el atributo type:
- "submit">: Envía el formulario en el que se encuentra.
- "reset": Restaura los valores predeterminados del formulario.
- "button": Crea un botón simple que no realiza ninguna acción por defecto. Lo normal es usarlo para lanzar un evento
<form>
<button type="submit">Enviar</button>
<button type="reset">Restablecer</button>
<button type="button">Botón sin acción</button>
</form>
Personalizar botones
En este ejemplo vemos que no hay ninguna diferencia con un control input, pero mira en esta otra versión
<form>
<button type="submit">
<img src="imgs/enviar.png" alt="enviar"></button>
<button type="reset">
<img src="imgs/borrar.png" alt="reset"></button>
<button type="button">
<img src="imgs/click.png" alt="generico"></button>
</form>
El botón contiene una imagen. Podría contener cualquier código HTML excepto un link.
Puede funcionar fuera de un formulario, esto se usa para lanzar eventos
<body>
<button type="button" id="click">
<img src="imgs/click.png" alt="aviso">
</button>
<script>
let btn = document.getElementById("click");
btn.addEventListener('click', ()=>alert("botón Pulsado"));
</script>
</body>
Form ligado
Si el botón se define dentro de un formulario funciona igual que un control input (bubmit o reset). Pero un button definido fuera de un formulario puede ligarse a uno con el atributo form al que se le asign el ifd de un formulario.
En este caso los botones pueden tener atributos que sobrescriben los valores definidos en la etiqueta <form>, como el action, method, enctype y formtarget. Esto permite que botones específicos envíen el formulario de una manera diferente a la configuración global definida en el <form>.
Aquí te explico cómo funcionan estos atributos:
- formaction: Sobrescribe el valor del action en el formulario, permitiendo que ese botón envíe los datos a una URL diferente.
- formmethod: Sobrescribe el método de envío (GET o POST), permitiendo usar otro método diferente al especificado en el formulario.
- formenctype: Sobrescribe el enctype del formulario, que define cómo se codifican los datos enviados (especialmente útil cuando se suben archivos).
- formtarget: Sobrescribe el target, permitiendo especificar si la respuesta se abrirá en una nueva pestaña (_blank), en el mismo documento, etc.
<body>
<form id="minombre" style="margin-bottom: 20px">
<label>Nombre</label>
<input name="nombre" id="nombre" type="text">
</form>
<button type="submit" form="minombre" formaction="verdatos.php">
<img src="imgs/enviar.png" alt="envío">
</button>
</body>
En este ejemplo el formulario no tiene ningún argumento, el campo action es configurado en el botón que se liga a él mediante el atributo id del formulario