[HTML] input 태그의 disabled 속성 활용하기

 

 

 

<input> 태그의 disabled 속성은 해당 <input> 요소가 비활성화됨을 명시한다.

 

disabled 속성이 명시된 <input> 요소는 사용할 수 없으며, 사용자가 클릭할 수도 없다.

또한, 폼 데이터가 제출될 때도 disabled 속성이 명시된 <input> 요소의 데이터는 제출되지 않는다.

 

따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 입력 필드를 클릭할 수 없도록 설정하고,

특정 조건이 충족되면 자바스크립트 등으로 disabled 속성값을 삭제하여 사용자가 입력 필드를 다시 사용할 수 있도록 조절할 수 있다.

 

disabled 속성은 불리언(boolean) 속성이다.

불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며,

명시하면 자동으로 true 값을 가지게 된다.

 

 

<form action="/examples/media/action_target.php" method="get">
    이름 : <input type="text" name="st_name"><br>
    학번 : <input type="text" name="st_id"><br>
    학과 : <input type="text" name="department" disabled><br>
    <input type="submit">
</form>

 

 

 

 

readonly / disabled 차이?

 

1. readonly

말그대로 읽기 전용이다.

사용자의 입력을 막기위해 readonly 를 사용하곤 한다.
readonly 의 경우 select, checkbox, radio에서 사용할 수 없다.
위의 세 경우에서 입력을 막고 싶다면 readonly 대신 disabled 를 사용해야한다.

---

2. disabled

disabled 역시 readonly 처럼 사용자의 입력을 막기위해 사용된다.
하지만 readonly와 큰 차이점이 있는데 바로 값을 넘길 수 있느냐 없느냐의 차이이다.
readonly 의 경우 입력은 되지 않지만 기존 value가 있다면 그 값을 parameter로 controller에 넘길 수 있지만,
disabled 의 경우 입력도 안 되고 기존 value 도 controller에 넘겨줄 수 없다.

---

무턱대고 disabled를 남발했다간, controller에서 값을 받아들이지 못해 오류가 발생할 수 있다.

select, checkbox, radio를 사용하면서 입력도 차단하고 값도 유지하고 싶으면

JavaScript로 값을 저장하는 방법등을 통해 우회하는 수 밖에 없다.