HTML form에서 readonly와 disabled의 차이점 정리 ✌️

HTML Form 작업하다 보면 이런 고민을 하게 된다.

“이 입력값은 수정은 못 하게 하고 싶은데,
서버에는 보내야 할까…?”

이때 항상 등장하는 선택지는 두 개이다.

• readonly
• disabled

겉보기엔 비슷하지만, 동작은 완전히 다르다.

 

한 줄 요약 🧠

readonly는 ‘읽기 전용’이고,
disabled는 ‘폼에서 제외’다.

 

기본 예제부터 보자

<input name="email" value="user@example.com" readonly />
<input name="role" value="admin" disabled />

화면에서는 둘 다 수정이 안 된다.
하지만 폼 제출 시 결과는 다르다.

 

가장 중요한 차이점: 폼 전송 여부 🚨

readonly

• 수정 ❌
• 포커스 가능 ✅
• 폼 전송됨 ✅

<input name="username" value="char" readonly />

// submit 시
{
  username: "char"
}

 

disabled

• 수정 ❌
• 포커스 ❌
• 폼 전송 안 됨 ❌

<input name="role" value="admin" disabled />

// submit 시
{
  // role 없음
}

➡️ 서버에서는 존재하지 않는 필드로 취급된다.

 

접근성(A11y) 관점에서도 다르다

readonly

• 키보드 포커스 가능
• 스크린 리더가 값 읽어줌
• “읽을 수 있는 정보”로 인식

disabled

• 포커스 불가
• 스크린 리더에서 건너뛰는 경우 많음
• “비활성 요소”로 인식

 

스타일링 차이 🎨

브라우저 기본 스타일도 다르다.

input:disabled {
  background: #eee;
  color: #999;
}

input:read-only {
  background: #fafafa;
}

• disabled → 흐릿하고 클릭 불가 느낌
• readonly → 선택/복사 가능

 

실제로 언제 뭘 써야 할까?

readonly가 적합한 경우 ✅

• 서버로 값은 보내야 함
• 사용자는 수정만 못 하게
• 예시
  • 자동 계산된 금액
  • 로그인된 사용자 이메일
  • 서버에서 내려준 고정 값

<input name="price" value="10000" readonly />

 

disabled가 적합한 경우 ❌   ➡️   ⭕️

• 조건이 충족되기 전까지 사용 불가
• 값 자체가 의미 없음
• 서버로 보내면 안 됨

<input name="coupon" disabled />

예시

• 권한 없는 옵션
• 선택 조건 미충족 상태
• 임시 비활성 UI

 

자주 하는 실수 ⚠️

❌ disabled 해놓고 값이 안 날아온다?

<input name="id" value="123" disabled />

서버에서 id가 안 오는 게 정상이다.

 

👉 이럴 땐 ~

<input value="123" disabled />
<input type="hidden" name="id" value="123" />

hidden input과 조합해야 한다.

 

JavaScript 관점 차이

input.readOnly = true;
input.disabled = true;

• disabled → 이벤트도 안 탐
• readonly → 클릭, 포커스, 복사 가능

 

요약 정리 🧾

• readonly
  • 수정 불가
  • 포커스 가능
  • 폼 전송됨
  • 정보 표시용
• disabled
  • 수정 불가
  • 포커스 불가
  • 폼 전송 안 됨
  • UI 비활성화용

 

한 문장으로 기억하면

“서버에 보내야 하면 readonly,
보내면 안 되면 disabled”

 

 

~ 참고 자료 ~

https://developer.mozilla.org/ko/docs/Web/HTML/Reference/Attributes/disabled

HTML disabled 속성 - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Reference/Attributes/readonly

HTML readonly 속성 - HTML: Hypertext Markup Language | MDN