Readonly vs Disabled: Qual eu devo usar ?

Olá devs 😁, eu me frustrei uns dias desses com um formulário que nele eu deveria deixar os campos de município e estado já preenchidos é desabilitado. Nessa feature de formulário, fiquei travado pois todos os dados estavam sendo passado enviado corretamente pelo formulário, mas os campos município e estado não eram passados juntamente com os outros dados. Com esse problemas na mão, fui na nossa velha amiga a buscar a resposta: internet.

Analisando o problema com mais detalhada, percebi que os campos mencionados acima, foram atribuídos à propriedade disabled, é nesse ponto que eu fui ler mais as documentações. O atributo disabled tem um comportamento de tornar o elemento não editável e também não focável, mas isso eu já sabia e nem precisava de documentação para compreender, mas que ele não envia os dados com o formulário que me deixou intrigado.

A realidade da vida nos ensinou que não devemos confiar em seres humanos e sim em documentos.

Problema encontrado

Ok, encontrei o problema, os campos de município e estado não eram enviados por esta atribuição a eles. Porém a regra de negócio define que esses campos não seja possível editar mas somente visualizados. Mas se não pode editar, tem que ser visualizado pelo usuário e ainda sim tem que ser enviado no formulário. Qual é a propriedade que eu devo usar para isso ? R: Readonly

Então veio o atributos readonly para solucionar esse problema besta, que a própria descrição dele basicamente é o que a regra de negócio define como obrigatório. Ele é usado para especificar que o campo é somente leitura, ou seja, o usuário não pode editá-lo, mas pode selecionar e copiar o conteúdo e isso permite que ele seja passado juntamente com os outros dados editáveis do formulário. Problema solucionado 🎉, mas vamos ao detalhes dessas duas propriedades.

Os atributos readonly e disabled são usados em elementos HTML para torná-los não editáveis e somente visualizados. O atributo readonly é usado para especificar que o campo é somente leitura, ou seja, o usuário não pode editá-lo, mas pode selecionar e copiar o conteúdo. Já o atributo disabled torna o elemento não editável, não focável e nem mesmo enviado com o formulário. O usuário não pode editar nem focar no controle, nem em seus descendentes de controle de formulário. Além disso, o elemento é desativado e não pode ser clicado.

Quando devo usar Readonly ou Disabled?

O atributo readonly é recomendado em situações em que o campo deve ser exibido para o usuário, mas não pode ser editado. Por exemplo, quando tem um regra de negócio que obrigada um campo já vim preenchido ou quando o campo contém informações que não devem ser alteradas pelo usuário. O mais interessante de usar o readonly, é para evitar que o usuário edite um campo enquanto o formulário está sendo enviado ou processado.

Para o disabled é recomendado em situações em que o campo não deve ser editado e principalmente enviado com o formulário. Por exemplo, quando o campo é opcional e não é necessário enviá-lo com o formulário ou campos que contêm informações sensíveis que não devem ser alteradas pelo usuário.

Em resumo:

• O disabled é recomendado quando o campo não deve ser editado e nem enviado com o formulário e;
• O atributo readonly é recomendado quando o campo deve ser exibido para o usuário, mas não pode ser editado;
• Ou seja , tanto para o readonly como para o disabled a definição deles vai ser por questões de segurança ou para evitar erros de entrada de dados.

Fonts:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly