[HTML] input 필드 비활성화 하기 (disabled, readonly 차이)

 

input 필드를 비활성화 하는 방법은

disabled 속성을 사용하는 방법과 readonly 속성을 사용하는 방법

이렇게 2가지가 있습니다.

이 두가지 속성을 사용하는 방법과 차이점을 알아보도록 하겠습니다.

 

input 필드 비활성화 하기 (disabled, readonly 차이)

 

1. disabled
2. readonly

 

1. disabled

<input id='name' value='anna' disabled>

 

input 필드에 disabled 속성을 사용하면, 

위의 예제와 같이 input 필드가 비활성화 됩니다.

input 필드의 색깔이 바뀌고, input 필드를 클릭해도 포커스가 가지 않습니다.

가장 중요한 것은, disabled 속성을 설정하면,

위의 예제와 같이 기본값이 설정되어 있더라도,

submit을 수행하면 값이 전달되지 않습니다.

 

 

 

2. readonly

<input id='name' value='anna' readonly>

input 필드에 readonly 속성을 설정하면,

위의 예제와 같이 input 필드에 값을 입력할 수 없게 됩니다.

disabled 속성을 설정했을 때와는 달리

input 필드의 색깔이나 겉모양이 바뀌지 않고, 마우스로 클릭하면 포커스도 해당 필드로 이동합니다.

input 필드의 값을 선택하고, 마우스 오른쪽 버튼을 클릭하여 내용을 복사할 수도 있습니다.

또한, submit을 수행하면 값이 전달된다는 것이 disabled 속성을 사용하는 것과 가장 큰 차이점 입니다.

 

---

 

input form에 대한 다른 포스팅

[HTML]<form>태그로 사용자 입력 받기

[HTML] <input type="text" /> 태그로 패스워드(비밀번호) 입력란 만들기`

[HTML] 입력받은 데이터 서버로 전송하기 - submit

[HTML] <input type="text" /> 태그로 버튼(button) 생성하기

[HTML] <input type="text" /> 태그로 체크박스(checkbox) 만들기

[HTML] <input type="text" /> 태그로 라디오버튼(radio) 만들기

[HTML] 입력 데이터 초기화를 위한 리셋 버튼(reset) 만들기

[HTML] 날짜, 시간, 년도 입력받기

[HTML] 날짜, 시간 입력 항목 기본값으로 세팅하기

[HTML] 날짜 입력 항목에 현재 시간을 기본값으로 세팅하기

[HTML] 사용자로부터 색깔 입력받기

[HTML] input type='file' 속성 알아보기 ( 파일 입력 )

[Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택)

[Javascript] 디렉토리 선택하여 파일 리스트 가져오기 (이름, 상대경로)

[Javascript] input 입력값 가져와서 출력하기

[Javascript] input 박스에 숫자만 입력되도록 설정하는 4가지 방법