html - form의 target

HTML <form> target Attribute

 HTML <form> tag

Example

Display the response received in a new window or tab:

<form action="demo_form.asp" method="get" target="_blank">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

Try it Yourself »

---

Definition and Usage

The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

The target attribute defines a name of, or keyword for, a browsing context (e.g. tab, window, or inline frame).

Differences Between HTML 4.01 and HTML5

The target attribute is supported in HTML5.

The target attribute was deprecated in HTML 4.01.

Note: Frames and framesets are not supported in HTML5, so the _parent, _top and framename values are now mostly used with iframes.

---

Syntax

<form target="_blank|_self|_parent|_top|framename">

Attribute Values

Value	Description
_blank	The response is displayed in a new window or tab
_self	The response is displayed in the same frame (this is default)
_parent	The response is displayed in the parent frame
_top	The response is displayed in the full body of the window
framename	The response is displayed in a named iframe

source - http://www.w3schools.com/tags/att_form_target.asp

---

*response를 보여주지 않을 경우

<form action="xxx" method="POST" target="empty">

<input></input>

</form>

<iframe name="empty" width="0" height="0" style="border: 0;"></iframe>

---

form 데이터를 새 창을 열어서 보내야 할 경우가 있다. 요즘은 ajax로 많이들 처리하지만, 사실 ID와 Password를 체크할 때 새 창을 열어서 많이들 검증했다.

이 때는 get 방식으로 파라미터를 보낼 수가 없다. post로 보내야 한다는 말이다. password를 주소 표시줄에 노출시키면 안 되니까.

이 때 간단한 방법이 있다. form에 target을 지정해 주고 자바스크립트로 이름 가진 창을 열어 주면 된다.

<script type=”text/javascript”>
var win;
function create(){
win = open(”,‘w’,‘width=300,height=200′);
}
</script>

일단 위는 새 창을 여는 자바 스크립트 함수다. 중요한 것은, ‘w’라고 써 준 것인데, 이게 새 창의 이름이 된다.

그리고 width=300,height=200은 새 창의 크기를 지정해 준 것인데, 사이에 공백이 들어가면 안 된다. width=300, height=200 이렇게 하면 안 된다는 말이다. (노랑색이 공백을 표시한 부분이다. 저 노랑색 만큼의 공백도 안 된다!)

그리고 form은 이렇게 만든다.

<form method=”post” action=”actionServlet” target=”w” onsubmit=”create();“>
(<input/>은 생략)
</form>

 그러면 훌륭하게 새 창이 열리면서 작동한다.

설마 action=”actionServlet”을 그대로 옮긴 사람은 없을 거라 생각한다. 저기는 알아서 창으로 띄울문서의 경로를 적어 줘야 한다. 왕초보를 위해 적었다.

출처 - http://mytory.net/archives/16

Ajax를 이용하여 파일업로드를 하는 소스들을 보면 form태그의 target속성을 이용하는 경우가 많다.

<form action="fileUpload.php" method="post" enctype="multipart/form-data" target="fileUpload"> <input type="file" name="upload[]" /> <input type="file" name="upload[]" /> <input type="submit" value="파일 전송" /> </form> <iframe name="fileUpload" src="fileUpload.php"></iframe>

target를 지정하지 않는다면 페이지 이동이 이루어지지만 target를 사용한다면, iframe의 페이지가 이동된다.
이 결과를 토대로 파일 업로드를 처리하게 된다.(XML문서를 띄어주던지 하는 방식으로...)

주의해야할점은 iframe에서 id속성이 아니라 name

속성을 사용한다는 것이다.

출처 - http://qnrdlqkrwhdgns.canxan.com/jpboard/post/290