43

Geralmente ambos possuem comportamentos similares quando renderizados no navegador.

Se eu abrir um HTML com isto:

<input type="text" value="tente me alterar" disabled>
<input type="text" value="tente me alterar" readonly>

Ambos não permitem que o usuário altere o texto, vejo o exemplo abaixo:

 <input type="text" value="tente me alterar" disabled>
 <input type="text" value="tente me alterar" readonly>

Então, qual a diferença de fato entre os dois tipos de estados, e quando eu devo usar cada um deles?

1

4 Respostas 4

54

Disabled não passa o valor para o fomulário, além de não poder editar.

Readonly envia o valor para o formulário e também não pode editar.

//edit

Tanto disabled quanto readonly são atributos predefinidos, isto quer dizer que, eles não precisam receber valor para que funcione.

end edit

Supondo que tenha esse html:

<form method="post" action="page.php">
    <input type="text" name="foo" value="foo" disabled />
    <input type="text" name="bar" value="bar" readonly />
</form>

Sua página 'page.php' irá receber apenas o $_POST['bar']

1
  • 1
    Outra diferença é que o aspeto predefinido dos dois é diferente.
    – luiscubal
    Commented 21/02/2014 às 0:25
24

Disabled você não pode editar nem obter o valor do input ao processar o Form.

Readonly você pode pelo menos pegar o valor do input no processamento do Form.

Isto é o básico. Há mais algumas nuances:

  • No Disabled você não consegue selecionar o valor do campo para copiá-lo, diferentemente do Readonly;
  • No Disabled o Tab Cursor não para no campo, diferentemente do Readonly;
3
  • "Pegar" o valor do input como usuário, certo? Pois programaticamente você ainda consegue ;) Commented 20/02/2014 às 20:43
  • Exatamente. Deixa eu melhorar isso. Commented 20/02/2014 às 20:50
  • Funcionou pra mim também. Valeu!
    – YanSym
    Commented 31/01/2018 às 21:20
11

Apenas para complementar as respostas do @mend3 e @Cigano Morrison Mendez.

Tanto disabled quanto readonly são atributos predefinidos, isto quer dizer que, eles não precisam receber valor para que funcione.

Exemplo:

Disabled:
<br>
<input type="text" placeholder="Apenas Disabled" disabled>
<br>
<input type="text" placeholder="Disabled true" disabled="true">
<br>
<input type="text" placeholder="Disabled false" disabled="false">
<br>
<input type="text" placeholder="Disabled goku" disabled="goku">
<br>Readonly:
<br>
<input type="text" placeholder="Apenas readonly" readonly>
<br>
<input type="text" placeholder="Readonly true" readonly="true">
<br>
<input type="text" placeholder="Readonly false" readonly="false">
<br>
<input type="text" placeholder="Readonly goku" readonly="goku">

Não adianta colocar false, os valores são ignorados e o atributo age como booleano, ou esta ou não esta.

4
readonly

Este atributo booleano indica que o usuário não pode modificar o valor do controle. HTML5 Este atributo é ignorado se o valor do atributo type for hidden, range, color, checkbox, radio, file ou um tipo de botão.

disabled 

Este atributo booleano indica que o controle de formulário não está disponível para interação. Em particular o evento click não será disparado em controles desabilitados. Além disso, o valor de um controle desabilitado não é enviado com o formulário.

Fonte: Atributos de um elemento

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .