HTML DOM의 Form target 속성은 폼(form) 데이터가 제출된 후 서버의 응답(response)이 어디에 표시될지를 지정하는 데 사용됩니다. 응답은 새 탭, 현재 탭 또는 새 창 등 다양한 위치에 나타날 수 있습니다. 이 속성을 사용하면 <form> 요소의 target 속성값을 설정하거나 현재 값을 가져올 수 있습니다.
문법(Syntax)
target 속성을 설정하는 기본 문법은 다음과 같습니다.
formObject.target = "_blank | _self | _parent | _top | framename"
각 값이 의미하는 바는 아래와 같습니다.
- _blank : 응답을 새 창 또는 새 탭에서 엽니다.
- _self : 응답을 현재 창(같은 프레임)에서 엽니다. 기본값입니다.
- _parent : 응답을 부모 프레임(parent frame)에서 엽니다.
- _top : 응답을 전체 창 본문 전체에서 엽니다.
- framename : 지정된 이름을 가진 특정 프레임에서 응답을 엽니다.
예제(Example)
HTML DOM Form target 속성의 실제 동작을 확인해 보겠습니다. 아래 예제에는 두 개의 텍스트 입력 필드와 SUBMIT 버튼, 그리고 target 속성값을 변경하는 CHANGE 버튼이 포함되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
form {
border: 2px solid blue;
margin: 2px;
padding: 4px;
}
</style>
<script>
function SubmitForm() {
document.getElementById("FORM1").submit();
}
function ChangeTarg() {
document.getElementById("FORM1").target = "_blank";
document.getElementById("Sample").innerHTML = "target 속성값이 _blank로 변경되었습니다.";
}
</script>
</head>
<body>
<h1>Form submit() 메서드 예제</h1>
<form id="FORM1" method="post" action="/sample_page.php">
<label>User Name <input type="text" name="usrN"></label><br><br>
<label>Age <input type="text" name="Age"></label><br><br>
<input type="button" onclick="SubmitForm()" value="SUBMIT">
</form>
<br>
<button onclick="ChangeTarg()">CHANGE</button>
<p id="Sample"></p>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 파란색 테두리가 있는 폼과 함께 두 개의 입력 필드(User Name, Age)와 SUBMIT 버튼이 화면에 표시됩니다.
기본 상태에서 SUBMIT 버튼을 클릭하면, 폼 데이터가 제출되고 응답은 현재 창(_self)에 표시됩니다.
반면, 먼저 CHANGE 버튼을 클릭한 뒤 SUBMIT 버튼을 클릭하면, 응답이 새 탭(_blank)에서 열리게 됩니다.
코드 상세 설명
먼저, 두 개의 text 타입 입력 필드와 SUBMIT 버튼으로 구성된 폼을 만듭니다.
<form id="FORM1" method="post" action="/sample_page.php"> <label>User Name <input type="text" name="usrN"></label><br><br> <label>Age <input type="text" name="Age"></label><br><br> <input type="button" onclick="SubmitForm()" value="SUBMIT"> </form>
다음으로, 사용자가 클릭하면 ChangeTarg() 메서드를 실행하는 CHANGE 버튼을 생성합니다.
<button onclick="ChangeTarg()">CHANGE</button>
ChangeTarg() 메서드는 document 객체의 getElementById() 메서드를 사용해 <form> 요소에 접근한 뒤, 해당 폼의 target 속성값을 "_blank"로 변경합니다. 이렇게 하면 폼 데이터 제출 후 응답이 새 탭에 표시됩니다. 동시에 innerHTML 속성을 활용해 id가 "Sample"인 단락(<p>)에 안내 문구를 출력하여 변경 사항을 사용자에게 알려줍니다.
function ChangeTarg() {
document.getElementById("FORM1").target = "_blank";
document.getElementById("Sample").innerHTML = "target 속성값이 _blank로 변경되었습니다.";
}
이처럼 HTML DOM의 Form target 속성을 활용하면 자바스크립트만으로 폼 제출 결과가 열리는 위치를 유연하게 제어할 수 있습니다. 멀티태스킹이 필요한 페이지나 외부 사이트로 결과를 넘겨야 하는 경우에 특히 유용하게 활용됩니다.