HTML DOM Input Search form 속성 완벽 정리: 개념부터 예제까지

HTML DOM Input Search의 form 속성은 특정 검색 입력 필드(type="search")를 포함하고 있는 폼(form) 요소에 대한 참조를 반환하는 데 사용됩니다. 만약 해당 검색 필드가 어떤 폼에도 속해 있지 않다면, 이 속성은 null을 반환합니다.

또한 이 속성은 읽기 전용(read-only)이므로, JavaScript로 값을 직접 변경할 수 없습니다.

구문(Syntax)

Input Search form 속성의 기본 구문은 다음과 같습니다.

searchObject.form

예제(Example)

이제 실제 코드를 통해 Input Search form 속성이 어떻게 동작하는지 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input search form Property</h1>
<form id="FORM_1">
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>
<p>아래 버튼을 클릭하면 폼의 id를 확인할 수 있습니다.</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
    function formId() {
        var P=document.getElementById("SEARCH1").form.id;
        document.getElementById("Sample").innerHTML = "검색 필드를 포함하는 폼의 id는: "+P ;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Input Search form 속성 완벽 정리: 개념부터 예제까지

GET FORM 버튼을 클릭하면 아래와 같이 폼의 id가 화면에 표시됩니다.

HTML DOM Input Search form 속성 완벽 정리: 개념부터 예제까지

코드 상세 분석

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

1. 검색 입력 필드 생성

먼저 type="search", id="SEARCH1", name="fruits"로 설정된 <input> 요소를 생성합니다. 이 검색 필드는 id 속성이 "FORM_1"로 지정된 폼 내부에 위치합니다.

<form id="FORM_1">
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>

2. 버튼 생성 및 이벤트 연결

다음으로, 사용자가 클릭하면 formId() 함수를 실행하는 GET FORM 버튼을 만듭니다.

<button type="button" onclick="formId()">GET FORM</button>

3. formId() 함수의 동작 원리

formId() 함수는 getElementById() 메서드를 사용하여 검색 타입의 입력 필드를 가져온 뒤, 해당 필드를 감싸고 있는 폼 객체의 id 속성 값을 읽어옵니다. 이후 이 값을 변수 P에 저장하고, innerHTML 속성을 활용해 id가 "Sample"인 단락(<p>)에 결과를 출력합니다.

function formId() {
    var P=document.getElementById("SEARCH1").form.id;
    document.getElementById("Sample").innerHTML = "검색 필드를 포함하는 폼의 id는: "+P ;
}

정리

Input Search의 form 속성은 DOM 트리에서 검색 필드와 폼 간의 관계를 확인할 때 유용하게 활용됩니다. 특히 동적으로 폼 데이터를 처리하거나, 특정 입력 필드가 어느 폼에 속해 있는지 검증해야 하는 상황에서 유용합니다. 단, 이 속성은 읽기 전용이라는 점과, 검색 필드가 폼 외부에 있으면 null이 반환된다는 점을 반드시 기억해 두세요.