HTML DOM의 Input Submit formTarget 속성은 제출(submit) 버튼의 formTarget 속성값을 설정하거나 반환하는 데 사용됩니다. 이 속성은 폼 데이터가 서버로 전송된 후, 서버에서 받은 응답(response)을 어디에 표시할지를 결정합니다. 또한 formTarget 속성은 <form> 요소의 target 속성보다 우선 적용되며, HTML5에서 type="submit"인 input 요소에 대해 새롭게 도입되었습니다.
문법(Syntax)
formTarget 속성을 설정하는 기본 문법은 다음과 같습니다.
submitObject.formTarget = "_blank|_self|_parent|_top|framename"
각 값의 의미는 아래와 같습니다.
- _blank : 응답을 새 창(또는 새 탭)에서 엽니다.
- _self : 응답을 현재 창, 즉 동일한 프레임에서 엽니다. (기본값)
- _parent : 응답을 부모 프레임에서 엽니다.
- _top : 응답을 창 전체 본문 영역에서 엽니다(모든 프레임을 대체).
- framename : 지정된 이름을 가진 특정 프레임에서 응답을 엽니다.
예제
Submit formTarget 속성의 실제 사용 예제를 살펴보겠습니다. 아래 코드는 처음에는 응답이 같은 창(_self)에서 열리도록 설정되어 있지만, CHANGE 버튼을 클릭하면 새 창(_blank)에서 열리도록 변경됩니다.
<!DOCTYPE html>
<html>
<body>
<h1>Submit formTarget 속성</h1>
<form id="FORM_1" action="/Sample.php" 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" formtarget=_self>
</form>
<p>아래 버튼을 클릭하면 폼 응답이 같은 창 대신 새 창에서 열립니다</p>
<button onclick="changeTarget()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeTarget() {
document.getElementById("SUBMIT1").formTarget="_blank";
document.getElementById("Sample").innerHTML = "이제 응답이 새 창에서 열립니다";
}
</script>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 CHANGE 버튼을 클릭하면 −
참고 사항
formTarget 속성은 HTML5 표준 사양으로, Chrome, Firefox, Safari, Edge, Opera 등 주요 최신 브라우저에서 모두 지원됩니다. 다만 Internet Explorer에서는 지원되지 않으므로, 구형 브라우저와의 호환성이 필요한 프로젝트에서는 사용 시 주의가 필요합니다.