¿Para qué sirve la etiqueta «button» y en qué se diferencia de «input type="submit"»?

La etiqueta <button> se utiliza para crear botones interactivos en tus páginas web. Es más versátil de lo que parece a primera vista, especialmente cuando la comparamos con <input type="submit">.

Etiqueta <button>

• Propósito:
  Crear un botón genérico. Su comportamiento específico se define con el atributo type.
• Atributo type:
  • submit: (Comportamiento por defecto si <button> está dentro de un <form>) Envía los datos del formulario.
  • reset: Restablece los campos del formulario a sus valores iniciales.
  • button: No tiene comportamiento predeterminado. Se usa principalmente para activar acciones mediante JavaScript.
• Contenido:
  Esta es su gran ventaja. La etiqueta <button> puede contener HTML enriquecido en su interior, como texto, imágenes, iconos (<span>, <img>, iconos SVG, etc.).
  Esto ofrece mucha más flexibilidad para el diseño y la estructura del botón.
  <button type="submit" name="enviar_formulario"> Enviar <img src="icono_enviar.png" alt=""> </button>
<button type="button" onclick="miFuncion()"> Púlsame <span style="color:red;">Ahora</span> </button>

Etiqueta <input type="submit">

• Propósito: Crea un botón cuya única función es enviar el formulario al que pertenece.
• Contenido: El texto que muestra este tipo de botón se define exclusivamente a través de su atributo value. No puede contener HTML interno. Su apariencia es más limitada.
  <input type="submit" value="Enviar Pedido">

Diferencias clave:

1. Contenido Interno:
   • <button>: Permite HTML complejo (texto, imágenes, etc.), lo que facilita la creación de botones visualmente atractivos y accesibles (por ejemplo, con iconos y texto).
   • <input type="submit">: Solo puede mostrar el texto plano asignado a su atributo value.
2. Versatilidad del type:
   • <button>: Puede ser submit, reset o button (para JavaScript).
   • <input type="submit">: Está específicamente diseñado para enviar formularios. Existen otros tipos de <input> como type="reset" y type="button", pero la etiqueta <button> a menudo los reemplaza por su flexibilidad de contenido.
3. Estilización (CSS):
   • Debido a que <button> puede contener otros elementos HTML, es generalmente más fácil de estilizar con CSS para lograr diseños complejos.

¿Cuándo usar cada uno?

• <button>: Es la opción preferida en HTML moderno para la mayoría de los casos, especialmente si necesitas un diseño personalizado, iconos, o si quieres un botón que no sea de tipo submit (como type="button" para acciones de JavaScript).
  Para enviar formularios, <button type="submit"> es la opción más flexible.
• <input type="submit">: Puede ser suficiente para formularios muy simples donde un botón de texto básico es todo lo que necesitas, o si estás trabajando con código heredado.

En general, <button> te ofrece mayor control y flexibilidad semántica y de presentación.