Qual é a diferença entre disabled = "disabled" e readonly = "readonly" para campos de entrada de formulário HTML?

Eu li um pouco sobre isso, mas não consigo encontrar nada sólido sobre como diferentes navegadores tratam as coisas.

Um readonlyelemento não é editável, mas é enviado quando o envio é enviado form. Um disabledelemento não é editável e não é enviado no envio. Outra diferença é que os readonlyelementos podem ser focados (e focados ao "tabular" um formulário), enquanto os disabledelementos não podem.

Leia mais sobre isso neste ótimo artigo ou na definição de w3c . Para citar a parte importante:

Principais diferenças

O atributo Desativado

• Valores para elementos de formulário desativados não são passados ​​para o método do processador. O W3C chama isso de um elemento bem-sucedido (isso funciona de maneira semelhante às caixas de seleção de formulário que não estão marcadas).
• Alguns navegadores podem substituir ou fornecer estilo padrão para elementos de formulário desabilitados. (Esbate ou grave o texto) O Internet Explorer 5.5 é particularmente desagradável quanto a isso.
• Elementos de formulário desativados não recebem foco.
• Os elementos de formulário desativados são ignorados na navegação por guias.

O atributo somente leitura

• Nem todos os elementos do formulário têm um atributo somente leitura. O mais notável, os <SELECT>, <OPTION>e <BUTTON>elementos não têm atributos somente leitura (embora ambos têm atributos com deficiência)
• Os navegadores não fornecem feedback visual substituído padrão de que o elemento do formulário é somente leitura. (Isso pode ser um problema ... veja abaixo.)
• Os elementos de formulário com o conjunto de atributos somente leitura serão passados ​​para o processador de formulários.
• Os elementos de formulário somente leitura podem receber o foco
• Os elementos de formulário somente leitura estão incluídos na navegação com guias.

Nenhum evento é acionado quando o elemento está com o atributo desativado.

Nenhuma das opções abaixo será acionada.

$("[disabled]").click( function(){ console.log("clicked") });//No Impact
$("[disabled]").hover( function(){ console.log("hovered") });//No Impact
$("[disabled]").dblclick( function(){ console.log("double clicked") });//No Impact

Enquanto somente leitura será acionado.

$("[readonly]").click( function(){ console.log("clicked") });//log - clicked
$("[readonly]").hover( function(){ console.log("hovered") });//log - hovered
$("[readonly]").dblclick( function(){ console.log("double clicked") });//log - double clicked

Desativado significa que nenhum dado desse elemento do formulário será enviado quando o formulário for enviado. Somente leitura significa que qualquer dado de dentro do elemento será enviado, mas não poderá ser alterado pelo usuário.

Por exemplo:

<input type="text" name="yourname" value="Bob" readonly="readonly" />

Isso enviará o valor "Bob" para o elemento "seunome".

<input type="text" name="yourname" value="Bob" disabled="disabled" />

Isso não enviará nada para o elemento "seunome".

O mesmo que as outras respostas (desativado não é enviado ao servidor, somente leitura), mas alguns navegadores impedem o destaque de um formulário desativado, enquanto o somente leitura ainda pode ser destacado (e copiado).

http://www.w3schools.com/tags/att_input_disabled.asp

http://www.w3schools.com/tags/att_input_readonly.asp

Um campo somente leitura não pode ser modificado. No entanto, um usuário pode tabular, realçar e copiar o texto.

Se o valor de uma caixa de texto desabilitada precisar ser retido quando um formulário for limpo (redefinido), disabled = "disabled"ele deverá ser usado, pois a caixa de texto somente leitura não reterá o valor

Por exemplo:

HTML

Caixa de texto

<input type="text" id="disabledText" name="randombox" value="demo" disabled="disabled" />

Botão de reset

<button type="reset" id="clearButton">Clear</button>

No exemplo acima, quando o botão Limpar é pressionado, o valor do texto desabilitado será retido no formulário. O valor não será retido no caso deinput type = "text" readonly="readonly"