HTML DOM 비밀번호 입력 필드 disabled 속성 완벽 가이드

HTML DOM에서 비밀번호 입력 필드(Input Password)의 disabled 속성은 해당 필드가 비활성화되어 있는지 여부를 설정하거나 현재 상태를 반환하는 데 사용됩니다. 이 속성은 불리언(Boolean) 값을 사용하며, true는 요소를 비활성화하고, false는 활성화 상태를 의미합니다.

disabled 속성의 기본값은 false입니다. 비활성화된 요소는 기본적으로 회색으로 표시되며 클릭이나 입력이 불가능합니다.

구문(Syntax)

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

passwordObject.disabled = true|false;

여기서 true는 비밀번호 필드를 비활성화하고, false는 비활성화하지 않음을 의미합니다. 기본값은 false입니다.

예제(Example)

비밀번호 입력 필드의 disabled 속성 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input Password disabled Property</h1>
Password: <input type="password" id="PASS">
<p>아래 DISABLE 버튼을 클릭하여 위 비밀번호 필드를 비활성화하세요</p>
<button type="button" onclick="disablePass()">DISABLE</button>
<p id="Sample"></p>
<script>
    function disablePass() {
        document.getElementById("PASS").disabled=true;
        document.getElementById("Sample").innerHTML = "The password field is now disabled";
    }
</script>
</body>
</html>

실행 결과(Output)

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

DISABLE 버튼을 클릭하기 전 화면입니다.

HTML DOM 비밀번호 입력 필드 disabled 속성 완벽 가이드

DISABLE 버튼을 클릭한 후 화면입니다.

HTML DOM 비밀번호 입력 필드 disabled 속성 완벽 가이드

코드 상세 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

먼저 id가 “PASS”인 비밀번호 입력 필드를 생성했습니다. 이 필드의 disabled 속성은 기본적으로 FALSE로 설정되어 있습니다.

Password: <input type="password" id="PASS" value="abcd123">

그다음, 사용자가 클릭하면 disablePass() 메서드를 실행하는 DISABLE 버튼을 생성했습니다.

<button type="button" onclick="disablePass()">DISABLE</button>

disablePass() 메서드는 getElementById() 메서드를 사용해 비밀번호 타입의 입력 필드를 가져온 뒤, 해당 필드의 disabled 속성을 true로 설정합니다. 이렇게 하면 비밀번호 필드가 비활성화되고 회색으로 표시됩니다. 이후 id가 “Sample”인 문단(paragraph)의 innerHTML 속성을 이용해 비밀번호 필드가 비활성화되었음을 알리는 메시지를 화면에 출력합니다.

function disablePass() {
    document.getElementById("PASS").disabled=true;
    document.getElementById("Sample").innerHTML = "The password field is now disabled";
}

정리

disabled 속성은 자바스크립트만으로도 간단하게 폼 요소의 사용 가능 여부를 제어할 수 있는 강력한 도구입니다. 특정 조건에 따라 입력 필드를 잠그거나 해제해야 하는 상황에서 유용하게 활용할 수 있습니다.