개요
HTML DOM에서 Input Checkbox(체크박스) 요소의 form 속성은 해당 체크박스를 포함하고 있는 폼(form) 객체에 대한 참조를 반환합니다. 이 속성을 활용하면 자바스크립트만으로 체크박스가 속한 폼의 id, name, action 등 다양한 정보에 손쉽게 접근할 수 있습니다.
만약 체크박스가 어떤 폼에도 속해 있지 않다면 이 속성은 null을 반환하므로, 실무에서는 반환값의 존재 여부를 함께 확인하는 것이 좋습니다.
구문
form 속성의 기본 구문은 다음과 같습니다.
form 객체에 대한 참조 반환
inputCheckboxObject.form
예제
다음은 HTML DOM Input Checkbox의 form 속성을 사용하는 전체 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>학생 정보</title>
</head>
<body>
<form id="Student-Form">
<div>
<input type="text" name="fullName" placeholder="예: 홍길동">
폼 ID 표시: <input id="formID" type="checkbox" name="formID">
</div>
</form>
<button onclick="getFormID()">체크박스가 포함된 폼의 ID 가져오기</button>
<div id="showResult"></div>
<script>
function getFormID(){
var checkboxFilter = document.getElementById("formID");
var showResultDiv = document.getElementById("showResult");
if(checkboxFilter.checked == true){
showResultDiv.textContent = '폼 ID: ' + checkboxFilter.form.id;
} else {
showResultDiv.textContent = '체크박스를 먼저 선택하세요';
}
}
</script>
</body>
</html>코드 설명
위 예제의 동작 흐름은 다음과 같습니다.
1. getElementById()로 체크박스(#formID)와 결과를 표시할 영역(#showResult)을 가져옵니다.
2. 버튼을 클릭하면 getFormID() 함수가 실행됩니다.
3. 체크박스가 선택된 상태라면 checkboxFilter.form.id를 통해 체크박스가 속한 폼의 ID인 Student-Form을 화면에 출력합니다.
4. 체크박스가 선택되지 않았다면 안내 문구를 대신 표시합니다.
실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'폼 ID 표시' 체크박스를 선택하기 전 −
'폼 ID 표시' 체크박스를 선택한 후 −
정리
Input Checkbox의 form 속성은 읽기 전용(read-only) 속성으로, 모든 주요 브라우저에서 지원됩니다. 폼 내부의 컨트롤에서 상위 폼 정보가 필요할 때 별도의 DOM 탐색 없이 바로 폼 객체에 접근할 수 있어 코드를 간결하게 유지하는 데 유용합니다.