HTML DOM의 Input submit disabled 속성은 폼의 제출(submit) 버튼을 비활성화할지 여부를 설정하거나 현재 상태를 반환하는 데 사용됩니다. 이 속성은 불리언(Boolean) 값을 사용하며, true이면 제출 버튼이 비활성화되고, false이면 활성화 상태를 유지합니다. 기본값은 false로 설정되어 있습니다.
비활성화(disabled)된 요소는 기본적으로 회색으로 표시되며, 사용자가 클릭할 수 없습니다. 이를 활용하면 특정 조건이 충족될 때까지 사용자가 폼을 제출하지 못하도록 제어할 수 있습니다.
구문(Syntax)
disabled 속성을 설정하는 구문은 다음과 같습니다.
submitObject.disabled = true|false
여기서 true는 제출 버튼을 비활성화한다는 의미이고, false는 비활성화하지 않는다는 의미입니다. 기본값은 false입니다.
예제(Example)
Input submit disabled 속성의 실제 사용 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input submit disabled 속성</h1>
<form action="/Sample_page.php" style="border:solid 2px green;padding:2px">
사용자 이름: <input type="text" id="USR"> <br>
위치: <input type="text" id="Loc"> <br><br>
<input type="submit" id="SUBMIT1">
</form>
<p>아래 DISABLE 버튼을 클릭하여 위의 제출 버튼을 비활성화해 보세요</p>
<button type="button" onclick="disableSubmit()">DISABLE</button>
<p id="Sample"></p>
<script>
function disableSubmit() {
document.getElementById("SUBMIT1").disabled = true;
document.getElementById("Sample").innerHTML = "제출 버튼이 비활성화되었습니다";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
DISABLE 버튼을 클릭한 후의 결과는 다음과 같습니다.
DISABLE 버튼을 클릭하면 disableSubmit() 함수가 실행되어, getElementById() 메서드로 제출 버튼 요소에 접근한 뒤 disabled 속성을 true로 변경합니다. 그 결과 제출 버튼은 회색으로 비활성화되어 클릭할 수 없게 되며, 화면에는 상태를 알리는 메시지가 표시됩니다.
활용 팁
이 속성은 실무에서 다음과 같은 상황에 유용하게 활용됩니다.
• 필수 입력값이 모두 채워지기 전까지 제출 버튼을 막고 싶을 때
• 폼 제출 처리 중 중복 클릭으로 인한 중복 전송을 방지하고 싶을 때
• 특정 조건(예: 약관 동의)이 충족될 때까지 제출을 제한하고 싶을 때
또한 disabled 속성을 읽어오면 현재 버튼의 활성화 여부를 불리언 값으로 확인할 수 있으므로, 조건문과 함께 사용하면 더욱 유연한 폼 제어가 가능합니다.