HTML DOM input month의 type 속성은 HTML 문서 내에서 type="month"로 지정된 월(month) 입력 필드의 type 특성 값을 반환하는 속성입니다. 이 속성을 활용하면 자바스크립트를 통해 해당 입력 필드가 어떤 유형(type)인지 동적으로 확인할 수 있습니다.
기본 문법(Syntax)
input month 요소의 type 속성을 사용하는 기본 문법은 다음과 같습니다.
object.type
별도의 매개변수 없이 호출하며, 반환값은 항상 문자열 "month"입니다.
예제 코드(Example)
아래는 HTML DOM input month type 속성의 실제 동작을 확인할 수 있는 전체 예제입니다. 버튼을 클릭하면 화면에 해당 입력 필드의 type 값이 표시됩니다.
<!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.1rem;
}
input{
display:block;
width:35%;
border:2px solid #fff;
background-color:transparent;
color:#fff;
font-weight:bold;
padding:8px;
margin:1rem auto;
}
.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;
color:#db133a;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Input Month Type 속성 데모</h1>
<p>안녕하세요! 제 type 값을 알고 싶으신가요?</p>
<input type="month" class="monthInput" required>
<button type="button" onclick="getType()" class="btn">클릭해서 type 값 확인하기</button>
<div class="show"></div>
<script>
function getType() {
var monthInput = document.querySelector(".monthInput");
document.querySelector(".show").innerHTML = "type = " + monthInput.type;
}
</script>
</body>
</html>
코드 설명
예제 코드의 핵심 로직을 살펴보면 다음과 같습니다.
<input type="month" class="monthInput" required>: 월을 선택할 수 있는 month 타입의 입력 필드를 생성합니다.required속성이 추가되어 필수 입력 항목으로 설정됩니다.document.querySelector(".monthInput"): 클래스명이monthInput인 입력 요소를 선택합니다.monthInput.type: 선택한 요소의 type 속성 값을 읽어옵니다.document.querySelector(".show").innerHTML: 조회한 type 값을 결과 출력 영역에 표시합니다.
실행 결과(Output)
위 코드를 브라우저에서 실행하면 다음과 같은 화면이 나타납니다.
여기서 “클릭해서 type 값 확인하기” 버튼을 누르면, 아래와 같이 해당 입력 필드의 type 값이 화면에 출력됩니다.
결과 영역에는 type = month라는 문구가 표시되며, 이를 통해 해당 입력 필드가 month 타입임을 확인할 수 있습니다.
마무리
HTML DOM의 type 속성은 폼 유효성 검사나 조건 분기 처리 시 유용하게 활용됩니다. 특히 여러 종류의 입력 필드가 혼재된 복잡한 폼에서 특정 타입의 요소만 골라 처리해야 할 때, 자바스크립트로 각 요소의 type 값을 손쉽게 판별할 수 있다는 점에서 실무적인 가치가 큽니다.