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> 타입의 요소들:
  • ``
  • ``
  • ``
  • ``
  • ``
  • ``
  • ``
  • ``
  • ``
  • ``
  • ``
  • ``
• <textarea>

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

• ``
• ``
• ``
• ``
• ``
• ``
• ``
• ``
• ``
• ``

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

속성 간의 상호작용

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

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

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

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

사용성

브라우저는 readonly 속성을 시각적으로 표시합니다.

제약 조건 유효성 검사

요소가 read-only 상태인 경우, 사용자가 해당 요소의 값을 변경할 수 없으며 이 요소는 제약 조건 유효성 검사 과정에 포함되지 않습니다.

HTML

<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>

같이 보기

• :read-only and :read-write
• <input>
• <select>