HTML의 <textarea> 요소에 readonly 속성을 추가하면 해당 텍스트 영역이 읽기 전용 상태로 설정됩니다. 읽기 전용으로 지정된 텍스트 영역은 방문자가 내용을 직접 수정할 수 없습니다.
다만, 읽기 전용이라도 텍스트를 복사하는 것은 가능합니다. 즉, 사용자 입력은 막으면서도 내용 열람과 복사는 허용해야 하는 경우에 유용하게 활용할 수 있습니다.
readonly 속성 문법
<textarea readonly>
readonly는 불리언(Boolean) 속성이므로 별도의 값을 지정하지 않고 속성 이름만 작성하면 됩니다.
예제 코드
다음은 <textarea> 요소에 readonly 속성을 적용한 실제 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>Interview Questions</h2>
<p>Q1</p>
<textarea rows="6" cols="70" placeholder="Why do you want go for the Editor Job Profile? (100 words)">
</textarea>
<p>Q2</p>
<textarea rows="6" cols="70" placeholder="Do you have any previous publishing experience? (100 words)">
</textarea>
<p>Guidelines to appear for interview:</p>
<textarea rows="6" cols="70" readonly>
The interviewee should reach at 10AM with the certificates.
</textarea>
</body>
</html>실행 결과
위 예제에서는 총 세 개의 텍스트 영역(textarea)을 사용했습니다.
- 첫 번째와 두 번째 텍스트 영역은 placeholder 속성을 이용해 안내 문구만 표시하며, 사용자가 자유롭게 답변을 입력할 수 있습니다.
- 세 번째 텍스트 영역에는 면접 관련 안내 사항이 미리 작성되어 있으며, readonly 속성이 적용되어 있습니다.
<textarea rows="6" cols="70" readonly>
The interviewee should reach at 10AM with the certificates.
</textarea>readonly 속성이 설정된 텍스트 영역에는 사용자가 새로운 텍스트를 추가하거나 기존 내용을 변경할 수 없습니다. 화면에는 일반 텍스트처럼 내용이 그대로 표시되지만, 클릭해도 커서가 깜빡이지 않으며 입력이 차단됩니다.
readonly와 disabled의 차이점
읽기 전용 처리 시 자주 혼동되는 속성으로 disabled가 있습니다. 두 속성의 주요 차이는 다음과 같습니다.
- readonly: 내용 수정은 불가능하지만 선택과 복사는 가능하며, 폼 제출 시 값이 함께 전송됩니다.
- disabled: 요소 자체가 비활성화되어 선택, 복사, 포커스가 모두 불가능하고, 폼 제출 시 값도 전송되지 않습니다.
따라서 안내 문구나 약관처럼 사용자에게 보여주기만 하면 되는 내용에는 readonly 속성을 적용하는 것이 적합합니다.