HTML DOM Input Text disabled 속성 – 텍스트 필드 비활성화 방법 총정리

HTML DOM의 Input Text disabled 속성은 텍스트 입력 필드를 비활성화할지 여부를 설정하거나 현재 상태를 반환하는 데 사용됩니다. 이 속성은 불리언(Boolean) 값으로 동작하며, true이면 해당 요소가 비활성화되고 false이면 활성화 상태를 유지합니다.

기본값은 false로 설정되어 있으며, 비활성화된 요소는 화면에서 회색으로 표시되고 사용자가 클릭하거나 입력할 수 없게 됩니다.

문법(Syntax)

disabled 속성을 설정하는 문법은 다음과 같습니다.

textObject.disabled = true|false;

true는 텍스트 필드를 비활성화하는 것이고, false는 비활성화하지 않음(활성화)을 의미합니다. 아무것도 지정하지 않으면 기본값인 false가 적용됩니다.

예제(Example)

아래 예제는 Input Text의 disabled 속성을 실제로 활용한 코드입니다. 버튼을 클릭하면 텍스트 필드가 비활성화됩니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input Text disabled Property</h1>
USERNAME: <input type="text" id="TEXT1" autofocus>
<p>DISABLE 버튼을 클릭하여 위 텍스트 필드를 비활성화해 보세요.</p>
<button type="button" onclick="disableText()">DISABLE</button>
<p id="Sample"></p>
<script>
    function disableText() {
        document.getElementById("TEXT1").disabled=true;
        document.getElementById("Sample").innerHTML = "텍스트 필드가 비활성화되었습니다";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Input Text disabled 속성 – 텍스트 필드 비활성화 방법 총정리

DISABLE 버튼을 클릭하면 자바스크립트 함수가 실행되어 텍스트 필드가 비활성화되고, 그 결과는 다음과 같이 표시됩니다.

HTML DOM Input Text disabled 속성 – 텍스트 필드 비활성화 방법 총정리

정리

disabled 속성은 폼 유효성 검사 중이거나 특정 조건에서 사용자 입력을 잠시 막아야 할 때 매우 유용합니다. 자바스크립트 한 줄로 간단히 제어할 수 있으며, 비활성화된 필드는 시각적으로도 구분되기 때문에 사용자 경험(UX) 측면에서도 명확한 피드백을 제공합니다.