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

HTML DOM의 Input Password form 속성은 비밀번호 입력 필드(type="password")를 포함하고 있는 폼(form) 객체의 참조를 반환하는 데 사용됩니다. 만약 해당 비밀번호 입력 필드가 어떤 폼에도 속해 있지 않다면 NULL을 반환합니다. 이 속성은 읽기 전용(read-only)이므로 값을 직접 변경할 수는 없습니다.

구문

다음은 input password form 속성의 기본 구문입니다.

passwordObject.form

예제

Input Password form 속성의 실제 동작을 확인할 수 있는 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input Password form Property</h1>
<form id="NEW_FORM">
Password: <input type="password" id="PASS">
</form>
<p>아래 버튼을 클릭하면 폼의 id를 확인할 수 있습니다.</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
    function formId() {
        var P=document.getElementById("PASS").form.id;
        document.getElementById("Sample").innerHTML = "비밀번호 필드를 포함하는 폼의 id는: "+P ;
    }
</script>
</body>
</html>

출력 결과

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

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

GET FORM 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.

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

예제 상세 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

1. 비밀번호 입력 필드 생성

먼저 id가 "PASS"인 비밀번호 입력 필드를 생성하고, 이를 id가 "NEW_FORM"인 <form> 요소 내부에 포함시켰습니다.

<form id=”NEW_FORM”>
Password: <input type="password" id="PASS">
</form>

2. 버튼 생성 및 이벤트 연결

그다음, 사용자가 클릭하면 formId() 함수를 실행하는 GET FORM 버튼을 만들었습니다.

<button type="button" onclick="formId()">GET FORM</button>

3. formId() 함수의 동작 원리

formId() 함수는 getElementById() 메서드를 사용하여 type이 password인 입력 필드에 접근한 뒤, 해당 비밀번호 필드를 감싸고 있는 form 객체의 id 속성 값을 가져옵니다. 이후 그 값을 변수 P에 저장하고, innerHTML 속성을 통해 id가 "Sample"인 단락에 결과를 출력합니다.

function formId() {
    var P=document.getElementById("PASS").form.id;
    document.getElementById("Sample").innerHTML = "비밀번호 필드를 포함하는 폼의 id는: "+P ;
}

정리

Input Password의 form 속성은 특정 입력 필드가 어느 폼에 속해 있는지 프로그래밍 방식으로 확인해야 할 때 유용하게 활용됩니다. 예를 들어, 자바스크립트로 폼 유효성 검사를 수행하거나 동적으로 폼 정보를 조작할 때 이 속성을 통해 부모 폼 객체에 쉽게 접근할 수 있습니다. 다만 읽기 전용 속성이므로 참조 조회 용도로만 사용해야 한다는 점을 기억하세요.