HTML DOM Input Number value 속성 완벽 가이드

HTML DOM의 Input Number value 속성은 type="number"로 지정된 <input> 요소의 value 속성과 연결되어 있습니다. 이 속성은 숫자 입력 필드의 value 속성 값을 가져오거나 새로 설정할 때 사용되며, 요소의 기본값을 지정하는 용도로도 활용됩니다. 또한 사용자가 입력한 값으로 변경된 내용을 자바스크립트에서 동적으로 읽어올 수 있다는 점이 큰 장점입니다.

문법(Syntax)

value 속성 설정하기

numberObject.value = number;

여기서 number는 숫자 입력 필드에 지정할 값을 의미합니다.

예제(Example)

다음은 Input Number value 속성을 활용한 간단한 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input Number Value 속성</h1>
전화번호: <input type="number" value="222" id="NUMBER1">
<p>아래 버튼을 클릭하면 위 입력 필드의 값을 확인할 수 있습니다.</p>
<button onclick="getValue()">값 가져오기</button>
<p id="Sample"></p>
<script>
    function getValue() {
        var t = document.getElementById("NUMBER1").value;
        document.getElementById("Sample").innerHTML = "입력 필드의 값 : " + t;
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM Input Number value 속성 완벽 가이드 – 문법과 예제 총정리

"값 가져오기" 버튼을 클릭하면 아래와 같이 입력 필드의 값이 표시됩니다.

HTML DOM Input Number value 속성 완벽 가이드 – 문법과 예제 총정리

코드 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

1. 숫자 입력 필드 생성
type="number"로 지정된 입력 필드를 만들고, id를 "NUMBER1"로 설정했습니다. 그리고 value 속성을 사용해 이 필드의 기본값을 222로 지정했습니다.

전화번호: <input type="number" value="222" id="NUMBER1">

2. 버튼 생성 및 이벤트 연결
사용자가 클릭하면 getValue() 함수를 실행하는 버튼을 만들었습니다.

<button onclick="getValue()">값 가져오기</button>

3. 값 읽어오기 및 화면 출력
getValue() 함수는 getElementById() 메서드로 입력 요소에 접근한 뒤, 해당 요소의 value 속성 값을 변수 t에 할당합니다. 이어서 innerHTML 속성을 통해 이 값을 id가 "Sample"인 단락에 출력합니다.

function getValue() {
    var t = document.getElementById("NUMBER1").value;
    document.getElementById("Sample").innerHTML = "입력 필드의 값 : " + t;
}

알아두면 좋은 특징

value 속성은 값을 항상 문자열(string) 형태로 반환합니다. 따라서 산술 연산이 필요하다면 parseInt()나 parseFloat()으로 변환한 후 사용하는 것이 안전합니다.
기본값을 별도로 지정하지 않으면 빈 문자열("")이 반환됩니다.
Chrome, Firefox, Safari, Edge 등 모든 주요 브라우저에서 폭넓게 지원되므로 호환성 걱정 없이 사용할 수 있습니다.