HTML DOM Input Datetime form 속성 – 폼 객체 참조를 반환하는 방법

HTML DOM의 Input Datetime form 속성은 datetime 유형의 입력 필드를 감싸고 있는 폼(form) 객체에 대한 참조를 반환합니다. 이 속성을 활용하면 특정 입력 요소가 어느 폼에 속해 있는지 확인할 수 있으며, 해당 폼의 id를 비롯한 다양한 정보에 접근하는 것이 가능합니다.

문법(Syntax)

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

inputDatetimeObject.form

form 속성은 읽기 전용(read-only)이며, 해당 입력 필드를 포함하고 있는 폼 객체를 반환합니다. 만약 입력 필드가 어떤 폼에도 속해 있지 않다면 null이 반환됩니다.

예제(Example)

아래 예제는 Input Datetime form 속성을 사용하여 datetime 입력 필드가 속한 폼의 id를 화면에 출력하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Datetime form</title>
</head>
<body>
<form id="dateTimeForm">
Date & Time: <input type="datetime" id="Datetime" value="2009-12-19T12:48Z">
</form>
<button onclick="getFormID()">Get Form ID</button>
<div id="divDisplay"></div>
<script>
   function getFormID() {
      var inputDatetime = document.getElementById("Datetime");
      var divDisplay = document.getElementById("divDisplay");
      divDisplay.textContent = 'Form ID for datetime input: '+inputDatetime.form.id;
   }
</script>
</body>
</html>

코드 설명

document.getElementById("Datetime") — id가 "Datetime"인 입력 요소를 가져옵니다.
inputDatetime.form.id — form 속성을 통해 해당 입력 필드가 속한 폼 객체에 접근한 뒤, 그 폼의 id 값을 읽어옵니다.
divDisplay.textContent — 조회된 폼 id를 화면의 div 영역에 텍스트로 출력합니다.

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

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

HTML DOM Input Datetime form 속성 – 폼 객체 참조를 반환하는 방법

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

HTML DOM Input Datetime form 속성 – 폼 객체 참조를 반환하는 방법

버튼을 클릭하면 datetime 입력 필드가 포함된 폼의 id인 dateTimeForm이 화면에 표시되는 것을 볼 수 있습니다.

참고 사항

<input type="datetime">은 HTML 표준 명세에서 제거되었으며, 현재 대부분의 최신 브라우저에서 지원하지 않습니다. 실제 프로젝트에서는 이를 대체하는 <input type="datetime-local"> 사용을 권장합니다. 다만 form 속성의 동작 방식은 입력 유형과 관계없이 모든 폼 관련 요소에서 동일하게 적용되므로, 개념 학습용 예제로는 충분히 유용합니다.