HTML DOM Input FileUpload form 속성 – 파일 업로드 버튼이 속한 폼 참조하기

HTML DOM Input FileUpload form 속성이란?

HTML DOM에서 Input FileUpload 요소의 form 속성은 해당 파일 업로드 입력 버튼을 감싸고 있는 폼(form) 객체에 대한 참조를 반환합니다. 이 속성을 활용하면 자바스크립트만으로 파일 업로드 버튼이 어떤 폼에 속해 있는지 확인할 수 있으며, 폼의 id, name 등 다양한 정보에도 손쉽게 접근할 수 있습니다.

문법(Syntax)

form 속성의 기본 문법은 다음과 같습니다.

object.form

예제(Example)

아래 예제는 Input FileUpload의 form 속성을 사용하여 파일 업로드 버튼이 포함된 폼을 식별하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
        background-color:#363946;
        color:#fff;
    }
    form{
        margin:2.5rem auto;
    }
    button{
        background-color:#db133a;
        border:none;
        cursor:pointer;
        padding:8px 16px;
        color:#fff;
        border-radius:5px;
        font-size:1.05rem;
    }
    .show{
        font-weight:bold;
        font-size:1.4rem;
    }
</style>
</head>
<body>
<h1>form Property Demo</h1>
<form id="Form 1">
<fieldset>
<legend>Form 1</legend>
<input type="file" class="fileUploadBtn">
</fieldset>
</form>
<button onclick="identify()">Identify File Upload button Form</button>
<p class="show"></p>
<script>
    function identify() {
        var formId = document.querySelector(".fileUploadBtn").form.id;
        document.querySelector(".show").innerHTML = "Hi! I'm from " + formId;
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM Input FileUpload form 속성 – 파일 업로드 버튼이 속한 폼 참조하기

화면 중앙의 "Identify File Upload Button Form(파일 업로드 버튼의 폼 확인하기)" 버튼을 클릭하면, 파일 업로드 버튼을 포함하고 있는 폼의 ID가 아래에 표시됩니다.

HTML DOM Input FileUpload form 속성 – 파일 업로드 버튼이 속한 폼 참조하기

정리 및 참고 사항

form 속성은 파일 업로드 버튼을 둘러싼 부모 폼 객체를 반환합니다.
파일 업로드 버튼이 어떤 폼에도 속해 있지 않으면 null을 반환합니다.
반환된 폼 객체를 통해 id, name, action 등 폼의 다른 속성들에도 접근할 수 있어 동적인 폼 처리에 유용하게 활용됩니다.