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
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