HTML DOM input month 폼(form) 속성 완벽 정리

HTML DOM의 input month 폼(form) 속성은 HTML 문서에서 <input type="month"> 요소가 속해 있는 폼(form)에 대한 참조(reference)를 반환하는 속성입니다. 이 속성을 활용하면 자바스크립트만으로 해당 월 입력 필드가 어떤 폼에 포함되어 있는지 쉽게 확인할 수 있습니다.

문법(Syntax)

input month 폼 속성의 기본 문법은 다음과 같습니다.

object.form

이 속성은 읽기 전용이며, 반환값으로는 해당 입력 필드를 감싸고 있는 <form> 요소 객체를 돌려줍니다. 만약 월 입력 필드가 어떠한 폼에도 속해 있지 않다면 null을 반환합니다.

예제(Example)

아래 예제를 통해 input month 폼 속성이 실제로 어떻게 동작하는지 살펴보겠습니다. 버튼을 클릭하면 월 입력 필드가 속한 폼의 id를 화면에 출력합니다.

<!DOCTYPE html>
<html>
<head>
<style>

   body{
      text-align:center;
      background-color:#363946;
      color:#fff;
   }

   form{
      margin:2.5rem auto;
   }

   button{
      background-color:#db133a;
      border:none;
      cursor:pointer;
      padding:8px 16px;
      color:#fff;
      border-radius:5px;
      font-size:1.05rem;
      outline:none;
   }

   .show{
      font-weight:bold;
      font-size:1.4rem;
   }
</style>
</head>
<body>
<h1>form Property Demo</h1>
<form id="Form 1">
<fieldset>
<legend>Form 1</legend>
<input type="month" class="monthInput">
</fieldset>
</form>
<button onclick="identify()">Identify Month Input Field</button>
<p class="show"></p>
<script>
   function identify() {
      var formId = document.querySelector(".monthInput").form.id;
      document.querySelector(".show").innerHTML = "Hi! I'm from " + formId;
   }
</script>
</body>
</html>

출력 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM input month 폼(form) 속성 완벽 정리 – 사용법과 예제

여기서 “Identify Month Input Field” 버튼을 클릭해 보세요. 그러면 자바스크립트의 .form.id 구문을 통해 월(month) 입력 필드가 포함된 폼의 id 값이 아래와 같이 표시됩니다.

HTML DOM input month 폼(form) 속성 완벽 정리 – 사용법과 예제

핵심 정리

form 속성: 월 입력 필드(<input type="month">)가 소속된 폼 객체를 반환합니다.
반환값: 폼에 속해 있으면 해당 <form> 객체, 속해 있지 않으면 null
활용 예: 폼 유효성 검사, 동적으로 폼 정보 확인, 특정 폼 내부의 입력값 처리 등

이처럼 form 속성은 DOM 탐색을 단순화해 주기 때문에, 복잡한 문서 구조에서도 입력 요소와 폼 간의 관계를 손쉽게 파악할 수 있다는 장점이 있습니다.