La Etiqueta BUTTON

La etiqueta <button> permite crear botones interactivos en una página web para ejecutar acciones, enviar formularios o activar funciones de JavaScript. Es fundamental para la interacción del usuario y debe usarse de manera semántica y accesible.

Sintaxis básica

<button type="button|submit|reset">Texto del botón</button>

Atributos clave:

• type: Define el comportamiento del botón (obligatorio para evitar comportamientos inesperados).

  • submit: Envía un formulario (valor por defecto si no se especifica).

  • reset: Restablece los campos de un formulario.

  • button: Acción personalizada (requiere JavaScript).

• disabled: Desactiva el botón (<button disabled>).

Casos de uso comunes

Botón de acción genérica (JavaScript)

<button type="button" onclick="alert('¡Hola!')">Haz clic</button>

Envío de formularios

<form id="miFormulario">
  <input type="text" name="email">
  <button type="submit">Enviar</button>
</form>

Botón de reinicio

<form>
  <input type="text" value="Texto inicial">
  <button type="reset">Restablecer</button>
</form>

Atributos avanzados

Atributo	Descripción
form	Vincula el botón a un formulario externo por su id
formaction	URL alternativa para enviar el formulario (solo type="submit")
formmethod	Método HTTP alternativo (GET, POST, etc.)
autofocus	Enfoca el botón al cargar la página
aria-label	Texto descriptivo para accesibilidad (si el botón solo tiene iconos)

Accesibilidad

Texto claro:

Evita textos ambiguos como "Hacer clic aquí".

Enfoque visual:

Asegura que el botón tenga un estilo de :focus visible.

Ejemplo accesible:

<button type="button" aria-label="Cerrar ventana">
  <span aria-hidden="true">×</span>
</button>

Estilización con CSS

Personaliza la apariencia:

button {
  background: #3498db;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

button:hover {
  background: #2980b9;
}

button:disabled {
  background: #95a5a6;
  cursor: not-allowed;
}

Errores comunes

Olvidar el atributo type

<!-- ¡Podría enviar un formulario accidentalmente! -->
<button>Botón peligroso</button>

Usar <div> o <a> como botones

<!-- Incorrecto -->
<div onclick="accion()">Falso botón</div>
<a role="button">Enlace disfrazado</a>

<!-- Correcto -->
<button type="button">Botón real</button>

Ignorar estados de interacción

<!-- Sin estilo para hover o focus -->
<button style="background: blue;">Botón plano</button>

Ejemplos avanzados

Botón con icono y texto

<button type="button">
  <img src="icono-descarga.svg" alt="" aria-hidden="true">
  Descargar PDF
</button>

Botón asociado a formulario externo

<form id="formExterno"></form>

<!-- Botón fuera del formulario -->
<button type="submit" form="formExterno">Guardar</button>

Botón de carga (spinner)

<button type="button" id="cargando">
  <span class="texto">Enviar</span>
  <span class="spinner" hidden></span>
</button>

<script>
  document.getElementById('cargando').addEventListener('click', function() {
    this.querySelector('.texto').hidden = true;
    this.querySelector('.spinner').hidden = false;
    this.disabled = true;
  });
</script>

Buenas prácticas

1. Semántica: Usa <button> para acciones, <a> para navegación.

2. Seguridad: Valida datos antes de procesar acciones en el backend.

3. Rendimiento: Evita múltiples clics con disabled durante procesos asíncronos.

4. Internacionalización: Usa lang y traduce textos para sitios multilingües.

Comparación: <button> vs <input type="button">

Característica	<button>	<input type="button">
Contenido interno	Permite HTML (texto, imágenes)	Solo texto (value)
Flexibilidad CSS	Mayor control de estilo	Limitado
Accesibilidad	Mejor soporte ARIA	Menos opciones
Uso recomendado	Acciones complejas	Casos simples sin formato especial

Conclusión:

La etiqueta <button> es esencial para crear interfaces interactivas y accesibles. Recuerda:

• Definir siempre el type.
• Priorizar la accesibilidad con ARIA y texto descriptivo.
• Usar CSS para una experiencia visual coherente.

¡Transforma tus acciones web en experiencias intuitivas y profesionales!