[HTML&CSS] readonly와 disabled의 차이 / form input controller에 안 넘어올 때

input value가 controller에 안 넘어와서 당황한적이 있었다 

알고보니 readonly와 disabled의 속성의 차이점을 몰라서 그랬던것..

 

 

웹 페이지에서 어느 특정 요소를 비활성화 처리할 때 사용하는 것이 readonly와 disabled이다. (readonly는 text요소, 나머지 요소는 disabled 사용)

1. readonly

말 그대로 읽기 전용이다.

readonly의 경우 select, checkbox, radio에서 사용할 수 없다.

<input type="text" value="only read" readonly>

2. disabled

disabled 역시 readonly처럼 사용자의 입력을 막기위해 사용된다.

하지만 큰 차이점이 있는데 바로 값을 넘길 수 있느냐 없느냐의 차이이다.

readonly의 경우 입력은 되지만 기존 value가 있다면 그 값을 parameter로 controller에 넘길 수 있지만 disabled의 경우 입력도 안 되고 기존 value도 controller에 넘겨줄 수 없다.

<input type="text" value="only read" disabled>

결과화면 : 읽기만 가능할 뿐 변경은 불가능(모든 요소에 사용 가능)

3. 결론

form으로 값을 보낼 때 readonly는 전송되지만 disabled의 값은 전송되지 않는다.

select, checkbox, radio를 사용하면서 입력도 차단하고 값도 유지하고 싶으면 JavaScript로 값을 저장하는 방법등을 통해 우회하는 수 밖에 없다.

 

출처 : https://aljjabaegi.tistory.com/251

출처 : https://velog.io/@kimju0913/HTMLCSS-readonly와-disabled의-차이