[HTML/CSS] readonly와 disabled의 차이

readonly와 disabled 의 차이점

사용자의 입력을 막기 위해 input 태그에 readonly와 disabled를 사용하곤 한다.
하지만 마구 남발하다간 영문 모를 오류를 맞이할 수 있다.

---

1. readonly

말그대로 읽기 전용이다. 흔히들 사용자의 입력을 막기위해 readonly 를 사용하곤 한다.
readonly 의 경우 select, checkbox, radio에서 사용할 수 없다.
위의 세 경우에서 입력을 막고 싶다면 readonly 대신 disabled 를 사용해야한다. 그럼 무슨 차이가 있는 것일까?

---

2. disabled

disabled 역시 readonly 처럼 사용자의 입력을 막기위해 사용된다.
하지만 큰 차이점이 있는데 바로 값을 넘길 수 있느냐 없느냐의 차이이다.
readonly 의 경우 입력은 되지 않지만 기존 value가 있다면 그 값을 parameter로 controller에 넘길 수 있지만,
disabled 의 경우 입력도 안 되고 기존 value 도 controller에 넘겨줄 수 없다.

---

무턱대고 disabled를 남발했다간, controller에서 값을 받아들이지 못해 오류가 발생할 수 있다.

select, checkbox, radio를 사용하면서 입력도 차단하고 값도 유지하고 싶으면 JavaScript로 값을 저장하는 방법등을 통해 우회하는 수 밖에 없다.