[HTML] input 입력 필드 비활성화 방법 2가지

사이트를 만들다보면 입력필드를 비활성화 시켜야 하는 상황은 꾀 자주 있습니다.

 

예를 들어 이미 입력되있는 필드는 못고치게 막는다거나 하는 상황들을 들 수 있죠.

회원정보 수정페이지에서 아이디는 보이긴 보이지만 수정은 할 수 없게 비활성화 되있는 상황 처럼요.

 

이 외에도 수정페이지에는 한개 쯤은 필요하신 곳이 있으시리라 생각이 드네요~

 

 

 

입력 필드의 입력을 비활성화 시키는 간단한 방법은 2가지가 있습니다.

 

input 태그의 속성인 disabled, 그리고 readonly가 있습니다.

 

 

//disabled는 비활성화와 함께 form으로 전송하여도 절대 전송 되지 않습니다.

<input type="text" name="val" disabled/>

이 input 에는 val 이라는 name이 있지만, <form> 데이터로 보지 않기 때문에 action 페이지에 전달되지 않습니다.

 

회원정보 수정 프로세스 페이지를 만약 회원정보 추가 페이지와 동일한 페이지로 쓴다면

 

혹시나 추가페이지에서는 전송되지만 수정페이지에서는 전송되지 않는 데이터 (예를들면 회원이름)를 $_POST나 $_GET으로 받고 있진 않은지 체크해보셔야 할 것 같습니다.

 

아니면 update query에서 회원이름도 update하고 있진 않은지 확인해보세요~ 받지 않은 빈 값을 업데이트하면 회원 이름이 사라질 수 있으니까요!

 

 

//readonly는 disabled처럼 입력은 비활성화 되지만 폼으로 전송 가능합니다.

<input type="text" name="val" readonly/>

 

disable과 달리 readonly는 입력만 막아놓았을 뿐 폼 전송은 되기 때문에 disable과 같이 귀찮은 체크 작업은 안하셔도 별로 상관없다고 보셔도 될 것 같아요!