[HTML] Input readonly와 disabled의 차이점은 무엇인가?

서론

정말 오랜만에 HTML 포스팅을 올리는데요, 오늘은 기본 html Input의 속성 중 비슷한듯(?), 다른 두 속성에 관해 비교해보겠습니다.

본론

아마 많은 분들이 disabled와 readOnly를 사용자가 Input에 값을 입력하지 못하도록 처리하기 위해 사용하실 것입니다. 두 요소 모두, 해당 역할을 수행할 수 있습니다. 그러나 차이점은 폼에 해당 Input value 값이 포함되느냐 마느냐의 여부입니다. 아래 예제를 살펴봅시다.

See the Pen form readonly vs disabled by joonfluence (@joonfluence) on CodePen.

차이점이 보이시나요? disabled된 Input의 value는 폼 값에 포함되지 않습니다. 따라서 사용자의 입력은 막고 싶지만, 폼에는 값이 등록되어야 한다면 readOnly 속성을 사용하시면 됩니다.

마무리

읽어주셔서 감사합니다!