HTML DOM의 input month defaultValue 속성은 HTML 문서에서 type="month"로 지정된 입력 필드의 기본값(default value)을 가져오거나 수정하는 데 사용됩니다. 이 속성을 활용하면 JavaScript만으로 월 선택 입력창의 초기 값을 동적으로 제어할 수 있습니다.
구문(Syntax)
defaultValue 속성의 기본 문법은 다음과 같습니다.
1. 기본값 반환하기
object.defaultValue
2. 기본값 설정하기
object.defaultValue=value
여기서 value는 문자열 형태의 날짜 값입니다. 예를 들어 "2019-03"처럼 연도와 월을 하이픈(-)으로 구분하여 지정합니다.
예제(Example)
HTML DOM input month 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 month defaultValue Example</h1>
<p>Hi, Enter your month of birth</p>
<input type="month" class="monthInput">
<button onclick="changeValue()" class="btn">Submit</button>
<div class="show"></div>
<script>
function changeValue() {
var monthInput = document.querySelector(".monthInput");
var showMsg = document.querySelector(".show");
monthInput.defaultValue = "1997-10";
monthInput.value= monthInput.defaultValue;
showMsg.innerHTML =":D hehe I changed your month of birth into mine!";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
이제 자신의 생년월(출생 월)을 입력한 뒤 "Submit" 버튼을 클릭해 보세요.
버튼을 클릭하면 changeValue() 함수가 실행되어 입력 필드의 defaultValue가 "1997-10"으로 변경되고, 그 값이 다시 value에 할당됩니다. 따라서 사용자가 선택했던 월이 기본값인 "1997년 10월"로 대체되는 것을 확인할 수 있습니다.
정리
defaultValue 속성은 HTML에 처음 작성된 value 특성 값을 반영하며, 스크립트로 변경한 후에는 폼 리셋 시 해당 값이 초기값으로 복원됩니다. 월 선택 입력 필드의 초기 상태를 프로그래밍 방식으로 관리해야 하는 경우 유용하게 활용할 수 있습니다.