Qual a diferença entre disabled e readonly? (inputs HTML)

Neste artigo veremos qual a diferença entre disabled e readonly e também quando utiliza cada um destes atributos de input do HTML.

Fala galera, beleza? Bora aprender mais sobre HTML e seus atributos de input!

Aparentemente os dois inputs com este atributo funcionam da mesma forma, pois o estilo é bem parecido

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Mas não é bem assim, com o atributo disabled o valor do input não pode ser editado, porém quando o formulário deste input for enviado, o dado que estiver em um input com disabled NÃO será enviado

Então tome cuidado, você não pode depender deste dado no processamento deste formulário

Veja um exemplo do input com disabled:

<input type="text" name="nome" disabled="disabled" />

Já o input que consta como o atributo readonly, ele também não pode ser editado, então esta funcionalidade os dois tem em comum

Porém no envio do formulário, os dados deste input que está com readonly serão enviados

Esta que é a grande diferença!

Veja um input com o readonly:

<input type="text" name="nome" readonly="readonly" />

Um caso prático

Então se você for fazer um formulário de endereço com auto completar de informações via o CEP do usuário

Você deve utilizar o readonly nos inputs que são preenchidos, pois se você utilizar disabled os dados que foram preenchidos automaticamente não serão enviados

Conclusão

Neste artigo vimos a diferença entre disabled e readonly

O disabled não envia os dados juntos dos outros inputs do formulário e não podemos editar os dados deste input

Já o readonly, não podemos editar também porém os dados são enviados na requisição

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube