HTML DOM input number defaultValue 속성 완벽 정리 – 기본값 조회 및 변경 방법

HTML DOM의 input number defaultValue 속성은 HTML 문서 내에서 type="number"로 지정된 숫자 입력 필드의 기본값(default value)을 가져오거나 수정할 때 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 숫자 입력 필드의 초기값을 동적으로 제어할 수 있습니다.

구문(Syntax)

defaultValue 속성의 기본적인 사용 구문은 다음과 같습니다.

기본값 반환하기

object.defaultValue

기본값 수정하기

object.defaultValue = "number"

예제(Example)

다음은 HTML DOM input number defaultValue 속성을 활용한 실제 예제입니다. 사용자가 생일(일)을 입력한 뒤 버튼을 클릭하면, 해당 값이 스크립트에서 지정한 기본값으로 변경됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    html{
       height:100%;
    }
    body{
       text-align:center;
       color:#fff;
       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
       height:100%;
    }
    p{
       font-weight:700;
       font-size:1.2rem;
    }
    input{
       width:35%;
       border:2px solid #fff;
       background-color:transparent;
       color:#fff;
       font-weight:bold;
       padding:8px;
    }
    .btn{
       background:#0197F6;
       border:none;
       height:2rem;
       border-radius:2px;
       width:35%;
       margin:2rem auto;
       display:block;
       color:#fff;
       outline:none;
       cursor:pointer;
    }
    .show{
       font-size:1.5rem;
       font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Input number defaultValue 예제</h1>
<p>안녕하세요! 본인의 생일(일)을 입력해 주세요</p>
<input type="number" class="numberInput">
<button onclick="changeValue()" class="btn">제출</button>
<div class="show"></div>
<script>
    function changeValue() {
       var numberInput = document.querySelector(".numberInput");
       var showMsg = document.querySelector(".show");
       numberInput.defaultValue = "20";
       numberInput.value = numberInput.defaultValue;
       showMsg.innerHTML = "짜잔! 당신의 생일(일)을 제 것으로 바꿔버렸습니다!";
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM input number defaultValue 속성 완벽 정리 – 기본값 조회 및 변경 방법

생일(일)을 입력한 후 제출(Submit) 버튼을 클릭하면, 입력 필드의 값이 스크립트에 설정된 기본값인 20으로 변경되는 것을 확인할 수 있습니다.

HTML DOM input number defaultValue 속성 완벽 정리 – 기본값 조회 및 변경 방법

참고 사항

defaultValue와 value의 차이: defaultValue는 HTML 문서에 처음 설정된 값 또는 스크립트로 지정한 기본값을 의미하며, value는 현재 입력 필드에 실제로 표시되는 값을 나타냅니다.
화면 반영: defaultValue만 변경하면 화면에는 즉시 반영되지 않습니다. 따라서 위 예제처럼 value 속성에 함께 대입해 주는 것이 좋습니다.
활용 분야: 폼 초기화, 입력값 리셋 기능, 사용자 안내용 기본값 표시 등 다양한 상황에서 유용하게 사용할 수 있습니다.