HTML DOM 입력 텍스트 defaultValue 속성 완벽 가이드

HTML DOM의 Input Text defaultValue 속성은 텍스트 필드의 기본값(defaultValue)을 설정하거나 가져오는 데 사용됩니다. 요소의 defaultValue란 HTML의 value 속성에 할당된 초기값을 의미합니다.

value 속성과 defaultValue 속성의 차이

두 속성은 비슷해 보이지만 중요한 차이가 있습니다. defaultValue 속성은 페이지 로드 시 처음 지정된 원래 기본값을 그대로 유지하는 반면, value 속성은 사용자가 입력 필드에 직접 입력한 내용에 따라 실시간으로 변경됩니다. 따라서 폼을 초기 상태로 되돌리거나 원래 설정값을 참조해야 할 때 defaultValue 속성이 유용하게 활용됩니다.

구문(Syntax)

다음은 defaultValue 속성을 설정하는 기본 구문입니다.

textObject.defaultValue = value

여기서 value는 해당 텍스트 필드에 지정할 기본값을 나타냅니다.

예제(Example)

버튼 클릭 시 텍스트 필드의 기본값을 변경하는 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input Text defaultValue Property</h1>
USERNAME: <input type="text" id="TEXT1" value="RON_1" autofocus>
<p>CHANGE 버튼을 클릭하여 위 텍스트 필드의 기본값을 변경해 보세요.</p>
<button type="button" onclick="changeDefault()">CHANGE</button>
<p id="Sample"></p>
<script>
    function changeDefault() {
        document.getElementById("TEXT1").defaultValue="ROHAN_2";
        var P=document.getElementById("TEXT1").defaultValue;
        document.getElementById("Sample").innerHTML = "기본값이 RON_1에서 "+P+"(으)로 변경되었습니다";
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM 입력 텍스트 defaultValue 속성 완벽 가이드

처음에는 텍스트 필드의 기본값이 RON_1로 설정되어 있습니다. CHANGE 버튼을 클릭하면 스크립트가 실행되어 기본값이 ROHAN_2로 변경되고, 그 결과가 아래 문단에 표시됩니다.

HTML DOM 입력 텍스트 defaultValue 속성 완벽 가이드

정리

defaultValue 속성은 텍스트 입력 필드의 초기값을 읽거나 수정할 때 사용하며, 사용자 입력과 무관하게 원래 지정된 기본값을 관리할 수 있다는 점에서 value 속성과 구별됩니다. 폼 초기화 기능이나 기본값 검증 로직을 구현할 때 유용하게 활용할 수 있습니다.