HTML DOM Input Date form 속성 – 날짜 입력 필드의 폼 참조 반환하기

HTML DOM의 Input Date form 속성은 날짜 입력 필드(input type="date")를 감싸고 있는 폼(form) 객체에 대한 참조를 반환합니다. 이 속성을 활용하면 특정 날짜 입력 요소가 어떤 폼에 속해 있는지 확인할 수 있으며, 해당 폼의 id나 이름 등 다양한 정보에 접근하는 것도 가능합니다.

문법(Syntax)

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

form 객체에 대한 참조 반환

inputDateObject.form

반환되는 값은 해당 날짜 입력 필드를 포함하고 있는 폼 객체입니다. 만약 날짜 입력 필드가 어떤 폼에도 속해 있지 않다면 null이 반환된다는 점을 기억해 두세요.

예제(Example)

Input Date form 속성의 실제 사용 예를 살펴보겠습니다. 아래 예제에서는 버튼을 클릭하면 날짜 입력 필드가 속한 폼의 ID를 화면에 출력합니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Date Form</title>
</head>
<body>
<form id="formForDateInput">
Date Select: <input type="date" id="Date" >
</form>
<button onclick="getFormID()">Get Form ID</button>
<div id="divDisplay"></div>
<script>
    function getFormID() {
        var inputDate = document.getElementById("Date");
        var divDisplay = document.getElementById("divDisplay");
        divDisplay.textContent = 'Form ID for date input: '+inputDate.form.id;
    }
</script>
</body>
</html>

실행 결과(Output)

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

'Get Form ID' 버튼을 클릭하기 전 −

HTML DOM Input Date form 속성 – 날짜 입력 필드의 폼 참조 반환하기

'Get Form ID' 버튼을 클릭한 후 −

HTML DOM Input Date form 속성 – 날짜 입력 필드의 폼 참조 반환하기

버튼을 클릭하면 자바스크립트 함수 getFormID()가 실행됩니다. 이 함수는 document.getElementById()로 날짜 입력 필드를 가져온 뒤, form 속성을 통해 부모 폼의 id 값인 "formForDateInput"을 읽어와 div 영역에 표시합니다. 이처럼 form 속성을 사용하면 별도의 복잡한 탐색 없이도 입력 요소와 폼 간의 관계를 손쉽게 확인할 수 있습니다.