AI 폼의 readonly와 disabled: 화면 잠금과 전송값 확인은 별개
입력 칸을 고칠 수 없게 보이게 했다고 제출 데이터까지 같아지는 것은 아닙니다. 텍스트 입력의 readonly와 disabled를 나누어 실제 FormData 항목을 확인하세요.
1. 보이는 상태와 제출 데이터를 나누기
WHATWG HTML 표준은 readonly를 사용자 편집을 막는 속성으로 설명합니다. disabled와 같은 뜻이 아니며 readonly는 텍스트 계열 입력에 적용됩니다. 체크박스나 버튼에 같은 효과가 있다고 가정하지 마세요.
AI가 작성한 프로필 수정 화면을 검토한다면, 변경 불가 ID를 readonly로 보여 주는지 disabled로 비활성화하는지 먼저 읽습니다. 이 선택이 서버에서 필요한 값을 빠뜨리거나 예상과 다른 제출을 만들 수 있습니다.
2. 작은 폼에서 차이 확인
직접 구성한 로컬 예제는 name="account" value="reader" readonly와 name="plan" value="basic" disabled를 같은 폼에 두고 new FormData(form)을 읽습니다. 확인 결과 account=reader는 포함되고 plan은 제외됐습니다. 실제 서비스의 계정 정보나 인증 자료는 사용하지 않았습니다.
| 예제 입력 | 편집 상태 | FormData 확인 |
|---|---|---|
| account / readonly | 사용자 수정 제한 | account=reader 포함 |
| plan / disabled | 비활성화 | plan 항목 제외 |
| 속성만 보고 판단 | 화면이 비슷해 보임 | 실제 키·값을 함께 비교 |
3. 서버 검증은 별도로 유지
readonly는 접근 권한을 보장하는 보안 경계가 아닙니다. 서버는 전달된 값을 별도로 검증해야 합니다. 제출 전에 값을 복구하는 숨은 스크립트를 더하기보다, 어떤 필드가 제출돼야 하는지와 서버의 기대 형식을 먼저 명확히 하세요.
| 검토 기록 | 확인 질문 |
|---|---|
| 표시 | 사용자가 수정할 수 있는가 |
| 제출 | 키·값이 실제 포함됐는가 |
| 서버 | 클라이언트 값을 신뢰하지 않고 검증하는가 |
4. 자주 묻는 질문
readonly를 모든 입력 종류에 붙이면 되나요?
아닙니다. 표준은 텍스트 계열 입력과 적용되지 않는 입력 종류를 구분합니다.
readonly면 서버 검증을 생략해도 되나요?
안 됩니다. 화면의 수정 제한과 서버가 값을 신뢰할 수 있는지는 별도 문제입니다.
HTML input의 readonly·disabled 표준 읽기(영문)
공식 자료 확인일 2026년 10월 15일: HTML input의 readonly·disabled 표준 읽기(영문).
대표 삽화는 AI로 제작했으며 본문 설명 도표는 직접 구성했습니다.
댓글
댓글 쓰기