HTML DOM의 input month name 속성은 HTML 문서에서 type="month"로 지정된 입력 필드의 name 속성 값을 가져오거나 수정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트를 통해 월(month) 입력 필드의 이름을 동적으로 조회하거나 변경할 수 있어, 폼 데이터 처리나 유효성 검사 시 유용하게 활용됩니다.
구문(Syntax)
input month name 속성의 기본 구문은 다음과 같습니다.
1. name 값 반환하기
object.name
2. name 값 수정하기
object.name = "text"
예제
HTML DOM input month name 속성의 실제 동작 방식을 예제를 통해 살펴보겠습니다. 아래 예제에서는 버튼을 클릭하면 월 입력 필드의 name 속성 값이 화면에 출력됩니다.
<!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 name 속성 예제</h1>
<input type="month" class="monthInput" value="2019-02" name="저는 월 입력 필드입니다!!">
<p>안녕하세요, 제 이름이 궁금하신가요?</p>
<p>그렇다면 버튼을 클릭해 보세요</p>
<button onclick="showName()" class="btn">이름 보기</button>
<div class="show"></div>
<script>
function showName() {
var monthInput = document.querySelector(".monthInput");
var showMsg = document.querySelector(".show");
showMsg.innerHTML = monthInput.name;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
이름 보기(Show Name) 버튼을 클릭하면 월 입력 필드에 설정된 name 속성 값이 아래 영역에 표시됩니다.
정리
input month name 속성은 읽기와 쓰기가 모두 가능하며, object.name 형태로 현재 name 값을 확인하고 object.name = "텍스트" 형태로 새로운 값을 할당할 수 있습니다. 이 속성은 Chrome, Firefox, Edge, Opera 등 주요 최신 브라우저에서 지원되므로, 폼 요소를 동적으로 제어해야 하는 상황에서 안심하고 사용할 수 있습니다.