HTML DOM Input Reset disabled 속성 – 리셋 버튼 비활성화 방법

HTML DOM의 Input Reset disabled 속성은 폼 안에 있는 리셋(reset) 버튼을 비활성화할지 여부를 설정하거나 현재 상태를 반환하는 데 사용됩니다. 이 속성은 불리언(boolean) 값을 사용하며, true이면 리셋 버튼이 비활성화되고, false이면 활성화 상태를 유지합니다. 기본값은 false입니다.

비활성화된(disabled) 버튼은 화면에서 회색으로 표시되며 클릭할 수 없어 사용자가 더 이상 해당 버튼과 상호작용할 수 없습니다.

문법(Syntax)

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

resetObject.disabled = true|false

true: 리셋 버튼을 비활성화합니다.
false: 리셋 버튼을 활성화합니다(기본값).

예제(Example)

다음 예제는 Input Reset disabled 속성을 실제로 활용하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input reset disabled Property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>
<p>DISABLE 버튼을 클릭하면 위의 리셋 버튼이 비활성화됩니다</p>
<button type="button" onclick="disableReset()">DISABLE</button>
<p id="Sample"></p>
<script>
    function disableReset() {
        document.getElementById("RESET1").disabled=true;
        document.getElementById("Sample").innerHTML = "리셋 버튼이 비활성화되었습니다";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 두 개의 텍스트 입력 필드와 리셋 버튼이 포함된 초록색 테두리의 폼이 화면에 나타납니다.

이후 DISABLE 버튼을 클릭하면 다음과 같은 결과가 발생합니다.

리셋 버튼이 회색으로 변경되며 클릭이 불가능해집니다.
버튼 아래에 "리셋 버튼이 비활성화되었습니다"라는 메시지가 표시됩니다.

코드 설명

1. 리셋 버튼 생성

먼저 type="reset", id="RESET1"로 지정된 <input> 요소를 만들었습니다. 이 버튼을 클릭하면 폼에 입력된 데이터가 초기화됩니다. 이 버튼은 두 개의 텍스트 필드를 포함하는 폼 내부에 있으며, 폼에는 인라인 스타일이 적용되어 있습니다.

<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>

2. DISABLE 버튼 추가

그다음, 사용자가 클릭하면 disableReset() 함수를 실행하는 DISABLE 버튼을 만들었습니다.

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

3. disableReset() 함수 동작 원리

disableReset() 함수는 getElementById() 메서드를 사용해 리셋 타입의 input 요소를 가져온 뒤, 해당 요소의 disabled 속성을 true로 설정합니다. 그 결과 리셋 버튼은 클릭할 수 없게 되고 회색으로 표시되어 더 이상 사용자와 상호작용하지 않습니다.

function disableReset() {
    document.getElementById("RESET1").disabled=true;
    document.getElementById("Sample").innerHTML = "리셋 버튼이 비활성화되었습니다";
}

이처럼 disabled 속성을 활용하면 특정 조건에서 사용자가 폼을 초기화하지 못하도록 제어할 수 있어, 유효성 검사 중이거나 작업 진행 중일 때 유용하게 사용할 수 있습니다.