HTML Botones
Los botones permiten a los usuarios interactuar con una página web. Pueden enviar formularios, ejecutar JavaScript o activar diferentes acciones al hacer clic.
HTML Botón
El elemento HTML <button> define un botón en el que se puede hacer clic.
Por sí solo, el botón no hace nada hasta que le agregues una acción.
Cómo aplicar estilos a los botones HTML
Los botones suelen tener estilo CSS:
Botones deshabilitados
Utilice el atributo disabled para hacer que no se pueda hacer clic en un botón:
Sugerencia: Los botones deshabilitados no se pueden hacer clic y generalmente aparecen descoloridos.
Botón con JavaScript
Puede ejecutar JavaScript cuando el usuario hace clic en un botón utilizando el atributo onclick:
Nota: Aprenderá más sobre JavaScript en nuestro capítulo HTML JavaScript.
Tipos de botones
El atributo type define la función de un botón al hacer clic. Existen tres tipos de botones:
type="button"- Un botón normal en el que se puede hacer clic (no hace nada de manera predeterminada)type="submit"- Envía un formulariotype="reset"- Restablece todos los campos del formulario
<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
Los botones se utilizan a menudo dentro de los formularios, sobre lo que aprenderá más en un capítulo posterior.
Por ahora, solo debes saber que un botón enviar envía los datos del formulario al servidor, mientras que un botón reiniciar borra el formulario:
Ejemplo
<form action="/action_page.html">
First name: <input type="text" name="fname">
<button type="submit">Submit</button>
<button type="reset">Reset Form</button>
</form>
Try it Yourself »
Nota: Siempre debe especificar el atributo type. Dentro de un formulario, el tipo predeterminado es submit, y los navegadores pueden comportarse de forma diferente si se omite este tipo.
HTML Referencia de botón
| Tag | Descripción |
|---|---|
| <button> | Define un botón en el que se puede hacer clic |
Sugerencia: Para obtener una lista completa de todas las etiquetas HTML, visite nuestra Referencia de etiquetas HTML.
❓ FAQ (Preguntas y respuestas sobre la lección)
¿Por qué se necesitan botones en una página web?
Los botones permiten a los usuarios interactuar con una página web. Pueden enviar formularios, ejecutar JavaScript o activar diversas acciones al hacer clic.
¿Qué elemento HTML de una página web define un botón en el que se puede hacer clic?
El elemento HTML <button> define un botón en el que se puede hacer clic. Un botón por sí solo no hace nada hasta que se le añade una acción.
¿Qué se utiliza para diseñar los botones de una página web?
Los botones de una página web generalmente se diseñan mediante CSS.
¿Qué atributo se utiliza para hacer que un botón de una página web no sea clicable?
Para que un botón no se pueda pulsar, use el atributo deshabilitado. Los botones deshabilitados no se pueden pulsar y suelen aparecer atenuados.
¿Qué atributo se utiliza para ejecutar JavaScript cuando el usuario hace clic en un botón?
Para ejecutar JavaScript cuando el usuario hace clic en un botón, se utiliza el atributo onclick.
¿Qué tipos de botones hay en una página web?
Hay tres tipos de botones:
- type="button" - Un botón normal en el que se puede hacer clic (no hace nada de forma predeterminada)
- type="submit" - Envía el formulario
- type="reset" - Restablece todos los campos del formulario
¿Para qué se utilizan con más frecuencia los botones de una página web?
La mayoría de las veces, los botones de una página web se utilizan dentro de formularios:
- El botón Enviar envía los datos del formulario al servidor;
- El botón de reinicio borra el formulario.
¿Cuál es el mejor sitio web en español para aprender HTML en línea?
El mejor sitio para aprender HTML es W3SchoolsES. ElMejor.
📚 Recursos adicionales para un estudio en profundidad
Para quienes deseen saber absolutamente todo sobre la etiqueta <button>, recomendamos consultar las fuentes principales y la documentación oficial:
- MDN Web Docs: <button> — La guía práctica más completa para desarrolladores, con ejemplos y una tabla de compatibilidad de navegadores.
- WHATWG: HTML Living Standard - <button> — La especificación técnica oficial, que describe la lógica interna del funcionamiento de los botones.
- W3C: Pautas de Accesibilidad (WAI-ARIA): estándares para crear botones que puedan ser utilizados por todos, incluidas las personas con discapacidad visual.
