HTML DOM Input DatetimeLocal form 속성 이해하기

HTML DOM의 Input DatetimeLocal form 속성은 datetime-local 타입의 입력 필드가 속해 있는 상위 폼(form) 요소에 대한 참조를 반환합니다. 이 속성을 활용하면 자바스크립트에서 해당 입력 필드가 어떤 폼에 포함되어 있는지 쉽게 확인하고, 폼의 id나 다른 속성에 접근할 수 있습니다.

문법(Syntax)

form 객체에 대한 참조를 반환하는 기본 문법은 다음과 같습니다.

inputDatetimeLocalObject.form

예제(Example)

Input DatetimeLocal의 form 속성을 사용하는 예제를 살펴보겠습니다. 아래 코드는 버튼을 클릭하면 datetime-local 입력 필드가 속한 폼의 id를 화면에 표시합니다.

<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal form</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form id="Mathematics">
<fieldset>
<legend>Datetime-Local-form</legend>
<label for="datetimeLocalSelect">Examination Time:
<input type="datetime-local" id="datetimeLocalSelect" value="2019-09-01T09:00">
</label>
<input type="button" onclick="showExamination()" value="Which exam is on this date? ">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
    function showExamination() {
        divDisplay.textContent = 'Exam: '+inputDatetimeLocal.form.id;
    }
</script>
</body>
</html>

실행 결과(Output)

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

'Which exam is on this date?' 버튼을 클릭하기 전 화면입니다.

HTML DOM Input DatetimeLocal form 속성 이해하기

버튼을 클릭한 후에는 datetime-local 입력 필드가 포함된 폼의 id인 'Mathematics'가 div 영역에 표시됩니다. 즉, inputDatetimeLocal.form.id를 통해 해당 입력 필드를 감싸고 있는 폼의 식별자에 접근할 수 있음을 확인할 수 있습니다.

HTML DOM Input DatetimeLocal form 속성 이해하기

정리

DatetimeLocal의 form 속성은 읽기 전용으로 동작하며, 입력 필드가 어떤 폼에도 속해 있지 않은 경우 null을 반환합니다. 폼 유효성 검사나 동적인 폼 처리 로직을 구현할 때 유용하게 활용할 수 있습니다.