JavaScript에서 버튼이 속한 폼(form)의 ID를 알아내려면 id 속성을 사용하면 됩니다.
HTML의 버튼 요소는 자신이 포함된 폼을 가리키는 form 속성을 기본적으로 제공합니다. 따라서 버튼의 form 속성에 접근한 뒤 다시 id 속성을 참조하면, 해당 버튼이 속한 폼의 ID를 아주 간단하게 확인할 수 있습니다. 참고로 버튼이 어떤 폼에도 속해 있지 않은 경우 form 속성은 null을 반환하므로, 실제 코드에서는 이 경우를 함께 처리해 주는 것이 좋습니다.
예제
다음 코드를 실행해 보면서 JavaScript로 버튼이 속한 폼의 ID를 가져오는 방법을 직접 익혀 보세요.
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
<button id="btn" type="button">My Button</button>
</form>
<script>
var str = document.getElementById("btn").form.id;
document.write("Form id of above button: "+str);
</script>
</body>
</html>
실행 결과:
Form id of above button: myForm
위 예제에서 document.getElementById("btn")으로 버튼 요소를 먼저 가져온 뒤, .form.id를 통해 버튼이 속한 폼의 ID인 myForm이 화면에 출력되는 것을 확인할 수 있습니다. 이 방법은 이벤트 핸들러 안에서 클릭된 버튼이 어느 폼에 속하는지 동적으로 파악해야 할 때 특히 유용하게 사용됩니다.