Atributo disabled
O atributo disabled bloqueia um elemento
de formulário HTML,
tornando-o inativo. É um atributo booleano.
Bloquear elementos geralmente é necessário para impedir que o usuário altere alguns valores (que, no entanto, devem ser mostrados ao usuário na forma de elementos de formulário). Às vezes, os elementos são bloqueados (e desbloqueados) usando JavaScript.
Comportamento
No caso de um botão (button
ou input
com o atributo type com os valores button,
reset ou submit) bloquear
significa que o botão não poderá ser clicado.
No caso de um campo de entrada de texto (input
ou textarea)
não será possível alterar ou copiar o
texto. No caso de caixas de seleção
e botões de rádio,
seu estado (marcado ou não) não poderá ser
alterado. No caso de listas suspensas
select
não será possível alterar o item selecionado na lista.
Um elemento bloqueado tem, por padrão, um fundo cinza. Ele também não participará das navegações com a tecla Tab.
Exemplo . Botão bloqueado
Vamos bloquear um botão usando o atributo
disabled. Para comparação, ao lado há um exemplo
de botão não bloqueado (tente clicar nele):
<button disabled>texto</button>
<button>texto</button>
:
Exemplo . Caixa de seleção bloqueada
Agora vamos ver uma caixa de seleção bloqueada. Para comparação, ao lado há um exemplo de uma caixa de seleção não bloqueada:
<input type="checkbox" disabled>
<input type="checkbox">
:
Exemplo . Caixa de seleção bloqueada e marcada
Vamos ver como fica uma
caixa de seleção bloqueada
e marcada usando o atributo checked.
Para comparação, ao lado
temos um exemplo de uma caixa de seleção não bloqueada
e marcada:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Exemplo . Campo de entrada de texto bloqueado
Agora vamos bloquear um campo de entrada. Para comparação, ao lado temos um exemplo de um campo não bloqueado:
<input type="text" value="texto" disabled>
<input type="text" value="texto">
:
Exemplo . Textarea bloqueado
Aqui veremos uma área de texto bloqueada (observe que o tamanho do textarea bloqueado pode ser alterado). Para comparação, ao lado temos um exemplo de uma área de texto não bloqueada:
<textarea disabled>texto</textarea>
<textarea>texto</textarea>
:
Exemplo . Lista suspensa bloqueada
Vamos ver como funciona uma
lista suspensa select bloqueada.
Para comparação, ao lado temos um exemplo de uma lista suspensa não bloqueada:
<select disabled>
<option>cidade1</option>
<option selected>cidade2</option>
<option>cidade3</option>
<option>cidade4</option>
</select>
<select>
<option>cidade1</option>
<option selected>cidade2</option>
<option>cidade3</option>
<option>cidade4</option>
</select>
:
