HTML DOM Input Time form 속성 완벽 가이드

HTML DOM에서 Input Time 요소의 form 속성은 해당 시간(time) 입력 필드를 감싸고 있는 폼(form)에 대한 참조를 반환합니다. 이 속성을 활용하면 자바스크립트만으로 특정 시간 입력 요소가 어떤 폼에 속해 있는지 확인하고, 해당 폼의 id, name 같은 정보에 손쉽게 접근할 수 있습니다.

구문(Syntax)

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

inputTimeObject.form

예제(Example)

Input Time form 속성이 실제로 어떻게 동작하는지 예제를 통해 살펴보겠습니다. 아래 코드는 버튼을 클릭하면 시간 입력 필드가 속한 폼의 id와 설정된 시간을 화면에 출력합니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Time 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="Physics">
<fieldset>
<legend>Time-form</legend>
<label for="TimeSelect">Examination Time :
<input type="time" id="TimeSelect" value="14:00" disabled>
</label>
<input type="button" onclick="getform()" value="Which Exam?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputTime = document.getElementById("TimeSelect");
    function getform() {
        divDisplay.textContent = inputTime.form.id+' exam starts from '+inputTime.value;
    }
</script>
</body>
</html>

출력 결과(Output)

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

'Which Exam?' 버튼을 클릭하기 전 −

HTML DOM Input Time form 속성 완벽 가이드

'Which Exam?' 버튼을 클릭한 후 −

HTML DOM Input Time form 속성 완벽 가이드

버튼을 클릭하면 getform() 함수가 실행되어, 시간 입력 필드가 포함된 폼의 id인 'Physics'와 입력된 시간 값 '14:00'이 함께 화면에 출력되는 것을 확인할 수 있습니다. 이처럼 form 속성은 입력 요소와 소속 폼을 연결 지어 처리할 때 매우 유용하게 사용됩니다.