HTML DOM Input Text form 속성 완벽 정리

HTML DOM의 Input Text form 속성은 텍스트 입력 필드(input type="text")가 포함된 폼(form)의 참조를 반환하는 데 사용됩니다. 만약 해당 텍스트 입력 필드가 어떤 폼에도 속해 있지 않다면 NULL을 반환합니다. 또한 이 속성은 읽기 전용(read-only)이므로 스크립트를 통해 직접 값을 변경할 수 없습니다.

문법(Syntax)

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

textObject.form

여기서 textObject는 document.getElementById() 등으로 가져온 텍스트 입력 요소를 의미하며, .form 속성에 접근하면 해당 요소를 감싸고 있는 폼 객체를 얻을 수 있습니다.

예제(Example)

Input Text form 속성의 실제 동작 방식을 예제 코드를 통해 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input Text form Property</h1>
<form id="NEW_FORM">
USERNAME: <input type="text" id="TEXT1">
</form>
<p>Get the form id by clicking on the below button</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
   function formId() {
      var P=document.getElementById("TEXT1").form.id;
      document.getElementById("Sample").innerHTML = "The id of the form containing the text field is: "+P ;
   }
</script>
</body>
</html>

코드 설명

<form id="NEW_FORM">: NEW_FORM이라는 ID를 가진 폼 안에 텍스트 입력 필드(TEXT1)가 포함되어 있습니다.
onclick="formId()": GET FORM 버튼을 클릭하면 formId() 함수가 호출됩니다.
document.getElementById("TEXT1").form.id: 텍스트 필드의 form 속성을 통해 부모 폼의 ID 값을 가져옵니다.
결과는 <p id="Sample"> 영역에 동적으로 출력됩니다.

실행 결과(Output)

위 코드를 브라우저에서 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM Input Text form 속성 완벽 정리 – 문법과 예제 코드

GET FORM 버튼을 클릭했을 때 −

HTML DOM Input Text form 속성 완벽 정리 – 문법과 예제 코드

버튼을 클릭하면 텍스트 필드가 속한 폼의 ID인 "NEW_FORM"이 화면에 출력되는 것을 확인할 수 있습니다. 이처럼 form 속성을 활용하면 자바스크립트에서 특정 입력 필드가 어느 폼에 소속되어 있는지 쉽게 파악하고, 폼 단위의 유효성 검사나 데이터 처리 로직을 구현할 수 있습니다.