HTML DOM Textarea form 속성 – 개념과 예제로 쉽게 이해하기

HTML DOM에서 Textarea의 form 속성은 해당 텍스트 영역(textarea) 요소를 감싸고 있는 <form> 요소에 대한 참조를 반환합니다. 이 속성은 읽기 전용이며, 자바스크립트를 통해 특정 textarea가 어떤 폼에 속해 있는지 동적으로 확인할 때 유용하게 활용됩니다.

구문

다음은 form 속성의 기본 구문입니다 −

object.form

반환값은 textarea를 포함하는 폼 객체이며, 만약 textarea가 어떤 폼에도 속해 있지 않다면 null이 반환됩니다.

예제

HTML DOM Textarea form 속성의 실제 동작 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<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>
<body>
<h1>DOM Textarea form Property Demo</h1>
<form id="Form 1">
<fieldset>
<legend>Form 1</legend>
<textarea rows="5" cols="20">Hi! I'm a text area element with some dummy text.</textarea>
</fieldset>
</form>
<button onclick="identify()">Identify Textarea Form</button>
<p class="show"></p>
<script>
   function identify() {
      var formId = document.querySelector("textarea").form.id;
      document.querySelector(".show").innerHTML = "Hi! I'm from " + formId;
   }
</script>
</body>
</html>

출력

HTML DOM Textarea form 속성 – 개념과 예제로 쉽게 이해하기

위 화면에서 "Identify Textarea Form" 버튼을 클릭하면, textarea 요소를 포함하고 있는 폼을 식별하여 그 결과를 화면에 표시합니다.

HTML DOM Textarea form 속성 – 개념과 예제로 쉽게 이해하기

동작 방식 설명

위 예제의 핵심 로직은 다음과 같습니다.

document.querySelector("textarea") : 페이지에서 첫 번째 textarea 요소를 선택합니다.
.form : 해당 textarea를 감싸고 있는 부모 폼 객체에 접근합니다.
.id : 그 폼의 id 속성 값을 가져와 결과 문장과 함께 출력합니다.

이처럼 form 속성을 활용하면 복잡한 DOM 탐색 없이도 특정 입력 요소가 어느 폼에 속해 있는지 손쉽게 파악할 수 있습니다. 폼 유효성 검사나 동적 폼 처리 로직을 작성할 때 특히 유용한 속성입니다.