HTML DOM hidden 입력 필드의 form 속성 완벽 정리

HTML DOM에서 hidden 입력 필드의 form 속성은 해당 숨김(hidden) 입력 필드가 포함되어 있는 폼(form) 객체에 대한 참조를 반환합니다. 즉, 특정 hidden 입력 요소가 어느 폼에 속해 있는지 자바스크립트를 통해 쉽게 확인할 수 있습니다.

문법(Syntax)

form 속성의 기본 사용 문법은 다음과 같습니다.

object.form

반환되는 값은 해당 입력 필드를 감싸고 있는 Form 객체입니다. 만약 입력 필드가 어떤 폼에도 속해 있지 않다면 null을 반환합니다.

예제(Example)

아래 예제를 통해 HTML DOM hidden 입력 필드의 form 속성이 실제로 어떻게 동작하는지 확인해 보겠습니다. 버튼을 클릭하면 hidden 입력 필드가 소속된 폼의 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;
   }
   .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>
   Here is hidden input field: <input type="hidden" class="hiddenField">
</fieldset>
</form>
<button onclick="identify()">Identify Hidden Input Field</button>
<p class="show"></p>
<script>
   function identify() {
      var formId = document.querySelector(".hiddenField").form.id;
      document.querySelector(".show").innerHTML = "Hi! I'm from " + formId;
   }
</script>
</body>
</html>

코드 설명

화면에는 ID가 Form 1인 폼 안에 숨김 입력 필드(<input type="hidden">)가 하나 배치되어 있습니다.
버튼을 클릭하면 identify() 함수가 실행됩니다.
document.querySelector(".hiddenField").form.id 코드를 통해 hidden 입력 필드가 속한 폼의 ID 값을 가져옵니다.
결과는 .show 클래스를 가진 문단에 동적으로 출력됩니다.

실행 결과(Output)

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

HTML DOM hidden 입력 필드의 form 속성 완벽 정리

여기서 “Identify Hidden Input Field” 버튼을 클릭하면, 숨김 입력 필드가 포함되어 있는 폼을 식별하여 그 결과가 아래와 같이 표시됩니다.

HTML DOM hidden 입력 필드의 form 속성 완벽 정리

정리

hidden 입력 필드의 form 속성은 자바스크립트로 폼과 입력 요소 간의 관계를 파악할 때 매우 유용합니다. 특히 동적으로 생성된 입력 요소가 어떤 폼에 귀속되는지 검증하거나, 폼 단위로 데이터를 처리해야 하는 상황에서 활용도가 높습니다. 참고로 이 속성은 읽기 전용이며, 모든 최신 브라우저에서 지원됩니다.