HTML DOM Input Number 타입 속성 완벽 정리

HTML DOM의 Input Number type 속성은 type="number"로 설정된 input 요소와 연관된 속성입니다. 이 속성은 숫자 유형의 입력 요소에 대해 항상 "number"라는 값을 반환합니다.

문법(Syntax)

Input Number type 속성의 기본 문법은 다음과 같습니다.

numberObject.type

예제(Example)

HTML DOM Input Number type 속성의 실제 사용 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input Number type property</h1>
PHONE NO: <input type="number" id="NUMBER1">
<p>아래 버튼을 클릭하면 해당 요소의 타입을 확인할 수 있습니다</p>
<button onclick="getType()">Get Type</button>
<p id="Sample"></p>
<script>
    function getType() {
        var t = document.getElementById("NUMBER1").type;
        document.getElementById("Sample").innerHTML = "The type for the input field is : "+t;
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM Input Number 타입 속성 완벽 정리

"Get Type" 버튼을 클릭한 후의 결과는 다음과 같습니다.

HTML DOM Input Number 타입 속성 완벽 정리

코드 상세 설명

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

1. 숫자 유형 입력 필드 생성

먼저 type이 "number"로 설정된 입력 필드를 생성하고, id를 "NUMBER1"로 지정했습니다.

PHONE NO: <input type="number" id="NUMBER1">

2. 버튼 생성 및 이벤트 연결

다음으로 "Get Type" 버튼을 만들어, 사용자가 클릭하면 getType() 함수가 실행되도록 설정했습니다.

<button onclick="getType()">Get Type</button>

3. getType() 함수의 동작 원리

getType() 함수는 getElementById() 메서드를 사용해 해당 input 요소에 접근하고, 그 type 속성값을 변수 t에 할당합니다. 이후 innerHTML 속성을 통해 변수 t의 값을 id가 "Sample"인 문단(paragraph)에 표시합니다.

function getType() {
    var t = document.getElementById("NUMBER1").type;
    document.getElementById("Sample").innerHTML = "The type for the input field is : "+t;
}

이처럼 HTML DOM의 type 속성을 활용하면 자바스크립트로 특정 입력 요소의 유형을 손쉽게 확인할 수 있으며, 폼 유효성 검사나 동적인 UI 처리에도 유용하게 활용됩니다.