HTML readOnly 속성 완벽 정리 – 입력 요소를 읽기 전용으로 만드는 방법

HTML의 readOnly 속성은 input 또는 textarea 요소가 읽기 전용(read-only) 상태임을 나타냅니다. 이 속성이 설정된 요소는 사용자가 HTML 문서에서 내용을 수정할 수 없으며, 값을 확인만 할 수 있습니다.

readOnly 속성의 특징

사용자가 입력값을 변경할 수 없습니다.
disabled와 달리 폼 제출 시 값이 함께 전송됩니다.
JavaScript로는 동적으로 값 변경이 가능합니다.

문법(Syntax)

readOnly 속성의 기본 문법은 다음과 같습니다.

<tagname readOnly></tagname>

예제(Example)

다음 예제를 통해 HTML readOnly 속성의 실제 동작을 확인해 보겠습니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
    input {
        display: block;
        width: 50%;
        margin: 1rem auto;
        text-align: center;
    }
</style>
<body>
<h1>HTML readOnly Demo</h1>
<input type="text" value="I'm an input element with readOnly property" readOnly>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 텍스트 입력 필드에 기본값이 표시되지만, readOnly 속성이 적용되어 있어 사용자는 해당 값을 클릭하거나 선택할 수는 있어도 수정할 수 없습니다.

HTML readOnly 속성 완벽 정리 – 입력 요소를 읽기 전용으로 만드는 방법

readOnly vs disabled 차이점

많은 개발자가 readOnly와 disabled를 혼동하는데, 두 속성에는 중요한 차이가 있습니다.

readOnly: 값이 폼 제출 시 서버로 전송되며, 요소에 포커스를 줄 수 있습니다.
disabled: 값이 폼 제출 시 전송되지 않으며, 요소 자체가 비활성화됩니다.

따라서 사용자에게 정보를 보여주되 수정은 허용하지 않고 싶다면 readOnly 속성을 사용하는 것이 적절합니다.