HTML <form> target Attribute
HTML <form> tagExample
Display the response received in a new window or tab:
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
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
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
'Development > HTML' 카테고리의 다른 글
| html - iframe 안에서 밖으로 자바스크립트 통신하기 (0) | 2013.07.27 |
|---|---|
| html5 - hashchange 이벤트 (0) | 2013.06.25 |
| html - label과 placeholder 차이 (1) | 2012.12.13 |
| HTML5 - Geolocation (0) | 2012.12.01 |
| html - 조건부 주석 (0) | 2012.09.11 |
