¡Pero cómo nos gustan los botones a los diseñadores web! Me acuerdo cuando hice mis primeros proyectos por allá el año 2015 y ponía botones por todas partes, todo lleno de botones.
Si por lo que sea aún no has utilizado esta etiqueta Button en HTML o tienes algunas dudas sobre cómo funciona, quédate a leer este capítulo, donde vamos a verlo absolutamente todo sobre esta etiqueta.
Por cierto, recuerda que este post forma parte del diccionario HTML que tenemos en el blog donde puedes encontrar cualquier etiqueta de este lenguaje.
¿Qué es la etiqueta Button?
La etiqueta Button en HTML se utiliza para crear botones clicables dentro de nuestra página web.
Estos botones funcionan de forma parecida a un enlace, pero la gran diferencia es que, con la etiqueta Button puedes desencadenar una acción o un evento determinado.
Por ejemplo, podemos enviar formularios o incluso mostrar y ocultar contenido en nuestra página web.
Ejemplo de cómo usar la etiqueta Button en HTML
Vamos a ver un ejemplo en nuestro editor para verlo un poco más claro.
Tenemos un elemento de párrafo que contiene el texto «Este es un texto oculto».
<body>
<!-- Ejemplo de texto oculto -->
<p id="textoOculto" style="display:none;">Este es un texto oculto.</p>
<!-- Botón HTML -->
<button onclick="mostrarOcultarTexto()" class="button">Mostrar/Ocultar Texto</button>
</body>
<!-- Script de JS para mostrar u ocultar el contenido -->
<script>
function mostrarOcultarTexto() {
var texto = document.getElementById("textoOculto");
if (texto.style.display === "none") {
texto.style.display = "block";
} else {
texto.style.display = "none";
}
}
</script>Más abajo, tenemos la etiqueta Button con un atributo «OnClick».
Este atributo es para ejecutar eventos. En este caso, estamos ejecutando la función de mostrar u ocultar texto que es una función de JavaScript.
Al darle clic al botón, se muestra el texto y al volver a darle clic, se oculta.
Tipos de Button en HTML
Existen varios tipos de botones en HTML, pero los principales serían tres:
Submit: Este tipo de botón se utiliza para enviar un formulario. Cuando se hace clic en un botón de tipo submit, los datos del formulario se envían al servidor.
<button type="submit">Enviar</button>
Reset: Restablece los valores predefinidos del formulario.
<button type="reset">Restablecer</button>
Button: Es un botón genérico y no tiene un comportamiento predefinido. Se lo tendríamos que dar nosotros a través de JavaScript.
<button type="button">Click me</button>
¿Cuáles son los atributos de la etiqueta Button?
Existen unos cuantos atributos que puedes usar en la etiqueta Button. A continuación te dejo los atributos de la etiqueta Button más comúnes.
| Atributo | Descripción |
| type | Define el tipo de botón. Puede ser «submit», «reset» o «button». |
| value | Define el valor del botón, que se envía con el formulario en caso de que el botón sea de tipo «submit». |
| name | Define el nombre del botón, que se puede utilizar para identificarlo en scripts o cuando se envía un formulario. |
| disabled | Desactiva el botón, lo que significa que no se puede hacer clic en él. |
| autofocus | El botón obtiene el foco automáticamente cuando se carga la página. |
| form | Asocia el botón con un formulario específico por ID, útil cuando el botón no está anidado dentro del formulario. |
| formaction | Define la URL a la que se enviará el formulario cuando se haga clic en el botón de tipo «submit». |
| formmethod | Define el método HTTP para enviar datos del formulario (por ejemplo, «GET» o «POST»). |
| formenctype | Define el tipo de codificación de datos del formulario cuando se envía (por ejemplo, «multipart/form-data»). |
| formtarget | Define dónde se abrirán los resultados del formulario después de enviarlo (por ejemplo, «_blank» para una nueva ventana). |
| formnovalidate | Omite la validación del formulario al enviarlo si está establecido. |
¿Cuál es la diferencia entre Submit y Button?
Alguien podría preguntarse cuál es la diferencia entre submit y Button.
- La etiqueta submit se utiliza dentro de un formulario de contacto y al hacer clic en este tipo de botón, lo que estamos haciendo es enviar esa información al servidor.
- En cambio, la etiqueta Button es un botón genérico y por sí solo no tiene ningún comportamiento. No va a enviar ningún formulario ni hará nada a menos que se lo indiquemos nosotros. Se puede utilizar para diversas interacciones dentro de la página, como desencadenar scripts, mostrar u ocultar contenido, entre otras cosas.
Si me permites un último consejo, no abuses mucho de la etiqueta Button.
También puedes incluir o puedes sustituirla por los típicos enlaces u otras etiquetas similares.
Recuerda que si tienes cualquier duda o sugerencia, puedes dejarla en los comentarios.
¡Nos vemos en la próxima lección! Adiós.
Bueno yo estoy aprendiendo esto para crear una aplicacion con html y javascript para enviar comando a un esp32 e inclusive mensage que se vean en una matrix de led y me importa aprender mucho usar los botones y cajas de texto,si tienes un video que me ayude dime la referencia
De momento no tengo algo tan específico como lo que comentas, pero tiempo al tiempo!