[HTML] readonly 속성 - 읽기 전용 필드 만들기

오늘은 입력란에 텍스트를 표시하는 것을 넘어 사용자가 입력하지 못하고 읽게만 만드는 기능인 readonly에 대해 알아보겠습니다.

readonly 속성은 해당 필드를 읽기 전용으로 바꾸어 줍니다. 즉, 텍스트 필드나 텍스트 영역처럼 필드 안에 내용이 있지만 사용자에게 내용을 보여 주기만 하고 입력은 할 수 없게 합니다. readonly 속성은 “true” 값을 지정하여 나타내도고 간단히 readonly라고만 쓰거나 readonly=”readonly” 라고 써도 readonly=”true”로 인식합니다.

 

실습을 통해 readonly 표현 방식 세 가지를 알아보겠습니다.

 

 

1. readonly = "true" 

 

<label for="Example">readonly 예제</label>

<input type="text" id="Example" value="수정불가" readonly="true">

 

위 예에서는 readonly가 true로 되어 있기 때문에 읽기 전용 텍스트 필드가 생성 됩니다. 

 

 

 

 

 

 

2. readonly = "readonly"

 

<label for="Example">readonly 예제</label>

<input type="text" id="Example" value="수정불가2" readonly="readonly">

 

 

 

 

 

 

 

 

3. readonly

 

  <label for="Example">readonly 예제</label>

  <input type="text" id="Example" value="수정불가3" readonly>