HTML DOM Input URL disabled 속성 완벽 가이드

HTML DOM의 Input URL disabled 속성은 URL 입력 필드(<input type='url'>)가 현재 활성화(enabled) 상태인지, 아니면 비활성화(disabled) 상태인지를 확인하거나 설정하는 역할을 합니다. 이 속성을 활용하면 자바스크립트만으로 특정 조건에서 사용자의 URL 입력을 차단하거나 다시 허용할 수 있어, 동적인 폼(form) 제어에 매우 유용합니다.

구문

기본 문법은 다음과 같습니다.

disabled 값 반환하기 — 불리언 값(true/false)을 반환합니다.

inputURLObject.disabled

disabled 값 설정하기 — 불리언 값을 대입하여 필드의 상태를 변경합니다.

inputURLObject.disabled = booleanValue

불리언 값

booleanValue에 사용할 수 있는 값은 아래와 같습니다.

booleanValue	설명
true	URL 입력 필드가 비활성화된 상태임을 의미합니다.
false	URL 입력 필드가 비활성화되지 않았음을 의미하며, 이 값이 기본값(default)입니다.

예제

다음은 Input URL disabled 속성을 활용한 예제입니다. 'URL 확인' 버튼을 클릭하면 입력 필드가 비활성화되고, 제출 완료 메시지가 화면에 표시됩니다.

<!DOCTYPE html>
<html>
<head>
<title>Input URL disabled</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type='button'] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>URL-disabled</legend>
<label for='URLSelect'>회사 홈페이지 :
<input type='url' id='URLSelect' value='https://www.example.com'>
</label>
<input type='button' onclick='getdisabled()' value='URL 확인'>
<div id='divDisplay'></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById('divDisplay');
    var inputURL = document.getElementById('URLSelect');
    function getdisabled() {
        inputURL.disabled = true;
        divDisplay.textContent = 'URL: '+inputURL.value+' 제출 완료.';
    }
</script>
</body>
</html>

출력 결과

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'URL 확인' 버튼을 클릭하기 전 —

HTML DOM Input URL disabled 속성 완벽 가이드

'URL 확인' 버튼을 클릭한 후 —

HTML DOM Input URL disabled 속성 완벽 가이드

동작 원리 정리

버튼을 클릭하면 getdisabled() 함수가 실행되고, inputURL.disabled = true; 코드에 의해 URL 입력 필드가 비활성화됩니다. 이후 사용자는 해당 필드의 값을 더 이상 수정할 수 없으며, 화면에는 제출 완료 메시지가 나타납니다. 반대로 false를 대입하면 비활성화된 필드를 언제든지 다시 활성화할 수 있습니다.