HTML readonly 속성

readonly 는 불리언 속성으로, 이 속성이 있는 경우 해당 요소는 변경 불가능해지며, 이는 사용자가 편집할 수 없음을 의미합니다.

시도해 보기

<label for="firstName">First Name:</label>
<input id="firstName" name="firstName" type="text" value="Adam" />
<label for="age">Age:</label>
<input id="age" name="age" type="number" value="42" readonly />
<label for="hobbies">Hobbies:</label>
<textarea id="hobbies" name="hobbies" readonly>Baseball</textarea>

label {
 display: block;
 margin-top: 1em;
}
input:read-only,
textarea:read-only {
 background-color: silver;
}

개요

만약, 입력 요소에 readonly 속성이 있는 경우, 사용자가 입력칸을 편집할 수 없으므로 해당 요소는 유효성 검사에 참여하지 않습니다.

readonly 속성은 다음을 포함한 텍스트 형식의 폼 양식에서 지원됩니다:

<input> 타입의 요소들:
- text
- search
- tel
- url
- email
- password
- date
- month
- week
- time
- datetime-local
- number
<textarea>

이 속성은 <select> 와 <button>을 포함한 다른 모든 요소에는 적용되지 않습니다. 또한 다음을 포함한 비텍스트 형식의 입력 요소에도 적용되지 않습니다:

hidden
range
color
checkbox
radio
file
submit
image
reset
button

readonly 속성을 지원하지만 해당 속성이 없는 입력 요소는 :read-write 의사 클래스에 일치합니다. 그 외 모든 요소는 :read-only 의사 클래스에 일치합니다.

속성 간의 상호작용

disabled 과 readonly 의 차이는 다음과 같습니다. read-only 속성이 있는 경우 여전히 작동할 수 있고 포커스를 받을 수 있지만, disabled 속성이 있는 경우 포커스를 받을 수 없고, form과 함께 제출되지 않으며, 활성화되기 전까지는 일반적으로 컨트롤로서의 기능을 하지 않는다는 점입니다.

사용자는 readonly 속성이 있는 필드의 값을 직접 변경할 수 없기 때문에, required 속성은 readonly 가 함께 있는 입력 필드에는 아무런 영향을 미치지 않습니다.

readonly 속성의 값을 동적으로 변경하는 유일한 방법은 스크립트를 통해서입니다.

참고 : required 속성이 있는 입력 요소에는 readonly 속성을 함께 사용할 수 없습니다.

<div class="group">
 <input type="text" value="Some value" readonly="readonly" id="text" />
 <label for="text">Text box</label>
</div>
<div class="group">
 <input type="date" value="2020-01-01" readonly="readonly" id="date" />
 <label for="date">Date</label>
</div>
<div class="group">
 <input type="email" value="Some value" readonly="readonly" id="email" />
 <label for="email">Email</label>
</div>
<div class="group">
 <input type="password" value="Some value" readonly="readonly" id="pwd" />
 <label for="pwd">Password</label>
</div>
<div class="group">
 <textarea readonly="readonly" id="ta">Some value</textarea>
 <label for="ta">Message</label>
</div>