개요
HTML DOM의 Input Submit form 속성은 지정된 제출(submit) 버튼을 포함하고 있는 폼(form)에 대한 참조를 반환하는 데 사용됩니다. 만약 해당 제출 버튼이 어떤 폼에도 속해 있지 않고 폼 외부에 위치한다면 null을 반환합니다. 이 속성은 읽기 전용(read-only)이므로 자바스크립트에서 직접 값을 변경할 수 없습니다.
주요 특징
- 제출 버튼이 포함된 폼 객체의 참조를 반환합니다.
- 버튼이 폼 밖에 있으면 null을 반환합니다.
- 읽기 전용 속성으로, 값을 수정할 수 없습니다.
- 폼의 id, action 등 다른 속성에 접근할 때 유용하게 활용됩니다.
문법(Syntax)
Input Submit form 속성의 기본 문법은 다음과 같습니다.
submitObject.form
예제(Example)
아래 예제는 Input Submit form 속성을 활용하여 제출 버튼이 속한 폼의 id를 가져오는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input submit form Property</h1>
<form action="Sample_page.php" id="FORM_1" style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Loc"> <br><br>
<input type="submit" id="SUBMIT1">
</form>
<p>아래 버튼을 클릭하면 폼의 id를 확인할 수 있습니다.</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
function formId() {
var P=document.getElementById("SUBMIT1").form.id;
document.getElementById("Sample").innerHTML = "The id of the form containing the submit button is: "+P ;
}
</script>
</body>
</html>코드 설명
<form>요소에는id="FORM_1"이 지정되어 있으며, 그 안에 텍스트 입력 필드 두 개와 제출 버튼이 포함되어 있습니다.- GET FORM 버튼을 클릭하면
formId()함수가 호출됩니다. document.getElementById("SUBMIT1").form.id구문을 통해 제출 버튼이 속한 폼의 id를 가져옵니다.- 결과는
id="Sample"인 문단에 출력됩니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
GET FORM 버튼을 클릭하면 아래와 같이 제출 버튼이 포함된 폼의 id가 표시됩니다.
정리
Input Submit form 속성은 제출 버튼과 폼 사이의 연결 관계를 참조로 얻을 수 있는 간단하면서도 유용한 기능입니다. 특히 동적으로 폼 정보를 확인하거나 조작해야 하는 상황에서 코드의 가독성과 유지보수성을 크게 높여 줍니다. 다만 읽기 전용 속성이라는 점과, 폼 외부에 있는 버튼에서는 null이 반환된다는 점을 항상 기억해 두어야 합니다.