0 Comentarios
Los botones son una de esas cosas que damos por sentadas cuando navegamos por Internet, ¿verdad? Están por todas partes: enviando formularios, reiniciando campos, lanzando acciones o simplemente decorando una interfaz. Pero cuando nos toca a nosotros crearlos desde cero, ahí ya cambia la cosa.
En HTML, los botones cumplen un papel clave en la interacción del usuario con la web. No son solo “cosas que se pueden pulsar”. Son elementos que permiten ejecutar acciones, navegar, validar información y mucho más. Y aunque hay muchos estilos y formas de diseñarlos con CSS o JavaScript, en el corazón de todo están cuatro tipos fundamentales de botones.
Así que hoy vamos a ayudarte a entender cuáles son esos 4 tipos de botones en HTML, para qué sirve cada uno y cómo usarlos con cabeza. No te preocupes, vamos paso a paso.
Este es el botón estrella cuando trabajamos con formularios. El botón type="submit" envía los datos introducidos por el usuario al servidor, normalmente al pulsarlo tras rellenar un formulario.
Se comporta como el “intro” natural del formulario. Si lo incluyes dentro de un <form>, al pulsarlo se ejecutará la acción definida en el atributo action del formulario (por ejemplo, enviar un correo, guardar datos en una base de datos, etc.).
Formularios de contacto.
Registros de usuario.
Formularios de suscripción a newsletters.
Pagos online.
Un truco: si solo tienes un botón dentro del <form>, no es necesario ponerle type="submit" porque se asume por defecto. Pero si tienes varios botones, es mejor dejarlo claro.
Este tipo de botón (type="reset") resetea el formulario. Es decir, borra todo lo que el usuario ha escrito y vuelve a los valores iniciales definidos en el HTML. ¿Útil? Sí. ¿Peligroso? También, si no se usa con cuidado.
Imagina que estás rellenando un formulario largo y sin querer le das al botón de reset... ¡desastre! Por eso no se recomienda usarlo a la ligera, a menos que esté muy claro su propósito y bien ubicado.
Ventajas:
Rápido y eficaz para limpiar formularios.
No requiere JavaScript adicional.
Precauciones:
Puede ser frustrante si se pulsa sin querer.
No tiene vuelta atrás, a menos que se combine con confirmaciones.
Un consejo: si lo vas a usar, considera añadir una ventana emergente que diga algo como "¿Estás seguro de que quieres borrar todo?".
Este es el “comodín” del desarrollo. type="button" no hace nada por sí solo, lo cual es una ventaja si lo que quieres es tener un control total desde JavaScript.
No está ligado a formularios (a menos que tú lo programes), y eso lo hace perfecto para crear experiencias interactivas, juegos, menús dinámicos o cualquier funcionalidad personalizada.
Abrir o cerrar un menú desplegable.
Ejecutar una función de JavaScript (onclick, por ejemplo).
Controlar una galería de imágenes.
Validar campos antes de enviar el formulario.
<button type="button" onclick="alert('¡Has hecho clic!')">Haz clic aquí</button>
Como ves, es el más libre de los botones. Tú mandas.
<button> y <input>Tanto <input type="button"> como <button> permiten crear botones, pero tienen diferencias clave:
<button> permite contenido más complejo: texto, imágenes, iconos, incluso HTML dentro.
<input> es más limitado: solo puede mostrar texto plano (via value).
Nosotros solemos preferir <button> en casi todos los casos, salvo cuando buscamos compatibilidad extrema o botones muy simples.
<button type="submit"><img src="enviar.png" alt=""> Enviar</button>
<input type="submit" value="Enviar">
Añade atributos aria-label si el botón tiene solo un icono.
Usa title para aportar contexto.
No olvides los alt si usas imágenes.
Elige bien el contraste de colores y el tamaño de fuente para que sean visibles y usables.
Evita el uso de solo color para comunicar estados (como “botón deshabilitado” en gris sin más).
Recuerda que un botón no sirve de nada si el usuario no sabe qué hace, o peor, si no puede usarlo.
| Tipo | Función principal | Relación con formularios | Uso común | ¿Requiere JavaScript? |
|---|---|---|---|---|
| submit | Enviar datos | Sí | Envío de formularios | No |
| reset | Restablecer valores | Sí | Limpiar formularios | No |
| button | Acción personalizada | No | Funciones dinámicas, JS | Sí |
| input/button | Visualización básica de botones | Opcional | Interfaz sencilla o rápida | Opcional |
Vale, ya sabemos qué tipos de botones existen, pero ¿y el diseño? Porque un botón feo puede hacer que el usuario ni se moleste en hacer clic.
Aquí van algunos consejos rápidos:
Haz que parezcan botones. Que no haya dudas de que son interactivos.
Usa colores contrastados. El botón debe destacar sobre el fondo.
Crea estados visuales: hover (cuando pasas el ratón), active, focus.
No abuses de las sombras y gradientes. A veces menos es más.
Dale espacio: un botón apretado entre otros elementos se ve torpe.
Añade transiciones suaves para que no sea brusco el cambio al pasar el ratón.
Y sobre todo: pruébalos tú mismo. Si no te apetece pulsarlo, imagina al visitante...
En resumen: cada tipo de botón tiene su propósito. No se trata solo de saber que existen, sino de usarlos con intención y criterio. A medida que vayas desarrollando tus proyectos, irás viendo qué opción encaja mejor en cada momento.
Desde el clásico submit para enviar datos, hasta el versátil button para lanzarte al mundo del JavaScript, todos ellos te abren una puerta distinta en la experiencia del usuario.
Si estás empezando y quieres aprender más sobre cómo hacer webs bien pensadas, visuales, funcionales y optimizadas para Google (sí, eso también importa), te invitamos a conocer nuestro servicio de diseño web en Alicante. Podemos ayudarte a convertir ideas en sitios web que realmente funcionan.
¿Qué te ha parecido este artículo?