Atributo disabled
El atributo disabled bloquea un elemento
de formulario HTML,
es decir, lo hace inactivo. Es un atributo
sin valor.
Bloquear elementos suele ser necesario para prohibir al usuario cambiar algunos valores (que, no obstante, deben ser mostrados al usuario en forma de elementos de formulario). A veces los elementos se bloquean (y se desbloquean) usando JavaScript.
Comportamiento
En el caso de un botón (button
o input
con el atributo type con los valores button,
reset o submit) bloquear
significa que el botón no se podrá hacer clic.
En el caso de un campo de entrada de texto (input
o textarea)
no se podrá cambiar o copiar el
texto en él. En el caso de los casillas de verificación
y los botones de radio
su estado (marcado o no) no se podrá
cambiar. En el caso de las listas desplegables
select
no se podrá cambiar la opción seleccionada de la lista.
Un elemento bloqueado por defecto tiene un fondo gris. Tampoco participará en los cambios de foco con la tecla Tab.
Ejemplo . Botón bloqueado
Vamos a bloquear un botón usando el atributo
disabled. Para comparar, al lado hay un ejemplo
de un botón no bloqueado (intenta hacer clic
en él):
<button disabled>texto</button>
<button>texto</button>
:
Ejemplo . Casilla de verificación bloqueada
Y ahora veamos una casilla de verificación bloqueada. Para comparar, al lado vemos un ejemplo de una casilla no bloqueada:
<input type="checkbox" disabled>
<input type="checkbox">
:
Ejemplo . Casilla de verificación bloqueada y marcada
Veamos cómo se ve una casilla de verificación
bloqueada y marcada usando el atributo checked.
Para comparar, al lado
veamos un ejemplo de una casilla marcada
no bloqueada:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Ejemplo . Campo de entrada de texto bloqueado
Y ahora vamos a bloquear un input. Para comparar, al lado veamos un ejemplo de un input no bloqueado:
<input type="text" value="texto" disabled>
<input type="text" value="texto">
:
Ejemplo . Textarea bloqueado
Y aquí veremos un textarea bloqueado (fíjate en que el tamaño del textarea bloqueado se puede cambiar). Para comparar, al lado veamos un ejemplo de un textarea no bloqueado:
<textarea disabled>texto</textarea>
<textarea>texto</textarea>
:
Ejemplo . Lista desplegable bloqueada
Veamos cómo funciona un
select bloqueado.
Para comparar, al lado veamos un ejemplo de una lista desplegable no bloqueada:
<select disabled>
<option>ciudad1</option>
<option selected>ciudad2</option>
<option>ciudad3</option>
<option>ciudad4</option>
</select>
<select>
<option>ciudad1</option>
<option selected>ciudad2</option>
<option>ciudad3</option>
<option>ciudad4</option>
</select>
:
