HTML input readonly 속성 – 입력 필드를 읽기 전용으로 만드는 방법

HTML input readonly 속성이란?

HTML의 readonly(읽기 전용) 속성은 <input> 요소를 사용자가 직접 수정할 수 없도록 선언하는 데 사용됩니다. 흥미로운 점은, 읽기 전용 상태의 입력 필드라도 값을 선택하고 복사하는 것은 가능하다는 것입니다.

readonly 속성은 자주 사용되는 disabled 속성과 혼동되기 쉬운데, 두 속성에는 중요한 차이가 있습니다.

readonly와 disabled의 차이

readonly: 값의 수정은 불가능하지만 선택·복사는 가능하며, 폼 제출 시 값이 서버로 정상적으로 전송됩니다.
disabled: 요소 자체가 비활성화되어 클릭, 선택, 복사가 모두 불가능하고, 폼 제출 시에도 값이 전송되지 않습니다.

따라서 시스템이 자동 생성한 값을 보여주되 사용자의 임의 변경은 막고 싶거나, 내용은 전달하되 편집은 허용하지 않아야 하는 경우에 readonly 속성이 적합합니다.

Input readOnly 속성 활용 예제

다음은 이메일 주소를 읽기 전용 필드로 표시하고, 버튼 클릭 시 해당 이메일을 클립보드로 복사하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Email readOnly</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Email-readOnly</legend>
<label for="EmailSelect">Contact Us :
<input type="email" id="EmailSelect" onclick="showErrorMsg()" value="infoHelpDesk@MNC.com" readOnly>
</label>
<input type="button" onclick="showMessage()" value="Copy Email Id">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputEmail = document.getElementById("EmailSelect");
   divDisplay.textContent = 'Above email is read-only';
   function showMessage() {
      inputEmail.select();
      document.execCommand('copy');
      divDisplay.textContent = 'Email Copied: '+inputEmail.value;
   }
   function showErrorMsg(){
      divDisplay.textContent +=', This cannot be edited.'
   }
</script>
</body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 단계별로 다음과 같은 화면을 확인할 수 있습니다.

'Copy Email Id' 버튼을 클릭하기 전 − 읽기 전용 이메일 필드와 복사 버튼이 표시되며, 하단에 'Above email is read-only' 안내 문구가 나타납니다.
'Contact Us' 이메일 필드를 클릭했을 때 − 해당 필드는 수정할 수 없다는 메시지('This cannot be edited.')가 추가로 표시됩니다.
'Copy Email Id' 버튼을 클릭했을 때 − 이메일 주소가 선택되어 클립보드에 복사되고, 'Email Copied:' 뒤에 복사된 주소가 출력됩니다.

참고 사항

예제에 사용된 document.execCommand('copy') 메서드는 현재 웹 표준에서 지원 중단(deprecated)된 API입니다. 실제 서비스 환경에서는 navigator.clipboard.writeText()와 같은 최신 Clipboard API를 사용하는 것이 권장됩니다. 또한 readonly 속성은 HTML boolean 속성이므로, 값 존재 여부만으로 적용되며 readOnly="true" 형태로 작성해도 동일하게 동작합니다.