[HTML/CSS] input 태그 입력 필드 비활성화 하는 2가지 방법

 

 

input태그 사용 시 사용자의 입력을 막기 위해 readonly와 disabled를 사용합니다.

 

1. readonly

<input> 태그의 readonly 속성은 <input> 요소의 입력 필드가 읽기 전용임을 명시한다.

readonly 속성은 input type="text" 에만 가능하다.

readonly 속성이 명시된 입력 필드의 값은 form 전송(submit)시 서버로 전달된다.

<input value="노출 텍스트"> <!--읽기 O, 쓰기 O -->
<input readonly value="노출 텍스트"> <!-- 읽기 O, 쓰기 X -->

 

가상 선택자

:read-write 편집할 수 있는 요소

:read-only 편집할 수 없는 요소

input:-moz-read-write {background-color: yellowgreen;} /* Firefox */
input:read-write {background-color: yellowgreen;}

input:-moz-read-only {background-color: pink;}  /* Firefox */
input:read-only {background-color: pink;}

 

See the Pen input readonly by hy0ni (@hy0ni) on CodePen.

 

 

 

2. disabled

<input> 태그의 disabled 속성은 readonly 속성과 같이 사용자의 입력을 막기 위해 사용한다.

disabled 속성은 모든 input 객체에 비활성화 처리가 가능하다.

disabled 속성이 명시된 입력 필드의 값은 form 전송(submit)시 서버로 전달되지 않는다.

 

See the Pen input disabled by hy0ni (@hy0ni) on CodePen.