¿Conoces el atributo disabled de HTML? HTML es un lenguaje de programación fundamental para el desarrollo web. Este lenguaje se basa en etiquetas que nos permiten crear distintos elementos que se mostrarán en nuestra web. Una de las etiquetas más populares es button. En este post, te enseñaremos qué es es y cómo funciona el atributo disabled de HTML, fundamental para trabajar con la etiqueta button.
¿Qué es el atributo disabled de HTML?
El atributo disabled de HTML es un atributo de tipo booleano. Es decir, al igual que el atributo required de HTML, su función se ejecuta con tan solo estar presente dentro de la etiqueta; no necesita de ningún valor específico. Puntualmente, este atributo nos permite interactuar con la etiqueta button.
La etiqueta button, como su nombre indica, nos da la posibilidad de crear un botón para ejercer diversas funciones con el clic del usuario. A continuación, te mostramos una etiqueta button con un texto simple:
<button> Crear usuario </button>
Ahora, el atributo disabled de HTML puede insertarse dentro de la etiqueta button para deshabilitar el uso del botón. A continuación, te demostramos cómo:
<button disabled> Crear usuario </button>
Deshabilitar el uso de un botón puede ser una buena idea al comienzo de la experiencia en nuestra página web. Es decir, hacer que el botón no pueda usarse al inicio, indicando que se debe ejecutar alguna acción. Esto es muy frecuente en formularios de registro, que no pueden enviarse usando el botón hasta que los distintos campos estén rellenados.
Una vez el atributo disabled de HTML esté insertado en nuestro botón, podremos programar la lógica de su activación desde JavaScript. Para ello, podemos usar los distintos métodos del DOM o el Document Object Model. En la siguiente línea de código, usamos uno de los métodos para seleccionar nodos del DOM: querySelector. Con él, seleccionamos la etiqueta button. Luego, aplicamos el método Element.removeAttribute para eliminar el atributo disabled de HTML.
document.querySelector («button»).removeAttribute («disabled»);
De este modo, logramos habilitar de nuevo el botón. Esta línea de código podría insertarse en el momento en el que queramos que se habilite este elemento, ya sea después de rellenar un formulario o después de ejecutar la acción que deseemos.
Paralelamente, podemos utilizar variables para encapsular algunas de las acciones anteriores y hacer que los métodos se vean mucho más limpios. Se podría guardar la selección de la siguiente manera:
const button = document.querySelector («button»);
button.setAttribute («disabled»)
O incluso guardar la acción de habilitar o deshabilitar:
buttonDisabled = button.setAttribute («disabled»)
buttonUnabled = button.removeAtribute («disabled»)
Para conocer más sobre este atributo, te recomendamos leer el artículo HTML Attribute: disabled en la página oficial de la Mozilla Developer Network (MDN).
¿Qué sigue?
Tras leer este post, sabes exactamente qué es y cómo funciona el atributo disabled de HTML. Sin embargo, este lenguaje es muy amplio y ¡todavía queda mucho por aprender! Por ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás herramientas y lenguajes fundamentales para la web, como JavaScript, HTML, CSS, JSX y mucho más. ¡No te lo pierdas y solicita ahora más información!
