1. disabled, readOnly 차이점.

1-1. disabled

• disabled는 HTML에서 불리언(boolean) 속성임.

  • 이 속성을 사용하면 해당 <input> 요소가 비활성화됨.
  • 비활성화된 입력 요소는 사용 불가능하며 클릭할 수 없음.

• disabled 속성은 사용자가 다른 조건(Ex. 체크박스 선택)을 충족할 때까지 <input> 요소를 사용하지 못하게 설정할 수 있고 이후 자바스크립트를 사용해 disabled 값을 제거하고 <input> 요소를 다시 사용할 수 있게 만들 수 있음.

• 폼(form) 내에 있는 disabled 입력 요소의 값은 서버로 제출(submit)되지 않음.

1-2. readOnly

• readonly 또한 불리언 속성임.

  • 이 속성을 사용하면 입력 필드가 읽기 전용이 됨.
  • 읽기 전용 입력 필드는 수정할 수 없음.
    (하지만 사용자는 탭 키로 이동하거나, 텍스트를 선택하고 복사할 수 있음)

• readonly 속성은 사용자가 다른 조건(Ex. 체크박스 선택)을 충족할 때까지 값을 변경하지 못하게 설정할 수 있고 이후 자바스크립트를 사용해 readonly 값을 제거하고 입력 필드를 편집 가능하게 만들 수 있음.

• 폼(form) 데이터는 readonly 속성이 있는 입력 필드의 값을 서버로 제출하지만, disabled 속성이 있는 입력 필드는 제출하지 않음.

2. 눈으로 확인하기.

2-1. disabled 사용.

• email input태그의 id를 이용해서 자바스크립트에서 disabled 처리 했을 경우.
  

• 위처럼 서버에서 입력값을 검증하는 단계에서 에러가 발생했음.
  
• 요청된 Payload를 보면 폼데이터에 email값은 없음.

2-2. readOnly 사용.

• email input태그의 id를 이용해서 자바스크립트에서 readOnly 처리 했을 경우.
  

• 요청된 Payload를 보면 폼데이터에 email값이 있음을 확인할 수 있음.

3. 참고.

• stackoverflow - What's the difference between disabled="disabled" and readonly="readonly" for HTML form input fields?
• w3schools - HTML <input> disabled Attribute
• w3schools - HTML <input> readonly Attribute