HTML readonly 속성 – 텍스트 관련 컨트롤 요소의 편집 여부 제어

정의 및 사용 방법

readonly 속성은
텍스트 관련 컨트롤 요소(<input>의 일부 유형과 <textarea>)의 편집 여부를 제어합니다.

이 속성이 지정되면 사용자가 해당 요소를 편집할 수 없는 읽기 전용 상태가 됩니다.

특징

readonly 속성으로 읽기 전용 상태가 된 요소는 다음과 같은 특징을 가집니다.

사용자는 해당 요소의 텍스트를 읽을 수는 있지만, 수정하거나, 삽입, 삭제 등 편집은 할 수 없습니다.
그렇지만, 해당 요소가 비활성화된 상태는 아니므로, 사용자의 키보드 탭(tab) 포커스 탐색에는 여전히 포함됩니다.
같은 이유로, 해당 요소의 값은 폼 제출 시 서버로 전송됩니다.
브라우저는 해당 요소의 readonly 속성을 시각적으로 구분하지 않고 화면에 그대로 표시합니다.

알아두세요!
readonly 속성으로 읽기 전용 상태가 된 요소는 사용자가 편집이 불가능하므로, required 속성이 적용(허용)되지 않습니다.

이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

기본 예제

HTML

<style>
    input:read-only {
        background-color: silver;
    }
</style>
<fieldset>
    <legend>이메일 수정하기</legend>
    <p>
        <label for="user-id">아이디</label>
        <!-- 텍스트를 읽을 수는 있지만,편집은 할 수 없음 -->
        <input id="user-id" type="text" value="abc-id" readonly>
    </p>
    <p>
        <label for="user-email">이메일</label>
        <input id="user-email" type="email" value="me@exmaple.com">
    </p>
</fieldset>

부연설명
readonly 속성으로 읽기 전용 상태가 된 요소에서 텍스트 선택, 복사 등의 동작은 브라우저마다 다를 수 있으며, 표준 명세서에서는 정의되어 있지 않습니다. 또한, 해당 요소의 값의 동적인 편집은 스크립트를 사용해야 합니다.

`readonly` 속성이 사용 가능한 요소

readonly 속성은 모든 요소에 적용할 수 있는 글로벌 속성이 아닙니다.
텍스트 관련 컨트롤 요소(<input>의 일부 유형과 <textarea>)에만 사용 가능합니다.

텍스트 관련 <input>의 일부 유형:
- <input type="text">
- <input type="password">
- <input type="search">
- <input type="url">
- <input type="tel">
- <input type="email">
- <input type="number">
- <input type="date">
- <input type="time">
- <input type="datetime-local">
- <input type="month">
- <input type="week">
<textarea>

텍스트와 관련되지 않은 컨트롤은 적용되지 않습니다. 예를 들면, 다음과 같은 컨트롤 요소들입니다.

알아두세요!
요소의 콘텐츠를 편집할 수 있는지 여부를 지정하는 contenteditable 속성이 적용된 요소도 텍스트 편집이 가능합니다. 하지만, 이러한 요소는 컨트롤 요소가 아니므로 readonly 속성을 적용할 수 없습니다.

`disabled`와 `readonly` 속성의 차이점

disabled와 readonly 속성은 모두 사용자와의 상호작용을 제한하는 데 사용되지만, 적용 대상과 동작 방식에 뚜렷한 차이가 있습니다. 이 두 속성의 차이를 명확히 이해하면 상황에 따라 적절한 속성을 사용할 수 있습니다.

`disabled`와 `readonly` 속성의 차이점
비교	`disabled`	`readonly`
사용 목적	해당 요소를 사용자로부터 완전히 비활성화해야 할 때	사용자에게 입력하거나 선택한 값을 읽기 전용으로 보여줄 때
폼 제출 시 서버로 전송	값이 전송되지 않음	값이 전송됨
적용 가능 요소	모든 컨트롤 요소	텍스트 관련 컨트롤 요소(`<input>`의 일부 유형과 `<textarea>`)