HTML <form> 태그의 target 속성이란?
<form> 요소의 target 속성은 폼(form)을 제출한 후 서버로부터 받은 응답(response) 결과를 어느 위치에 표시할지 지정하는 속성입니다. 예를 들어, 결과를 새 창이나 새 탭에서 열도록 하거나, 현재 화면 그대로 출력되도록 설정할 수 있습니다.
기본 문법
<form target="_blank|_self|_parent|_top|frame">
target 속성 값 정리
- _blank – 응답을 새 창 또는 새 탭에 표시합니다.
- _self – 응답을 현재 프레임(같은 화면)에 표시합니다. 기본값입니다.
- _parent – 응답을 부모 프레임에 표시합니다.
- _top – 응답을 창 전체 본문에 표시하여 기존의 모든 프레임을 대체합니다.
- frame – 응답을 지정된 이름(name)을 가진 특정 프레임에 표시합니다.
예제: target="_blank"로 새 창에 응답 표시하기
다음은 <form> 요소에 target 속성을 실제로 적용한 예제입니다. 여기서는 _blank 값을 사용하여 폼을 제출했을 때 결과가 새 창(새 탭)에 나타나도록 설정했습니다.
예제 코드
<!DOCTYPE html> <html> <body> <h2>Points</h2> <form action="new.php" method="get" target="_blank"> Player: <input type="text" name="player"><br> Rank: <input type="number" name="rank"><br> Points: <input type="number" name="points"><br> <button type="submit" value="Submit">Submit</button> </form> </body> </html>
실행 결과
위 코드를 실행하면 플레이어 이름(Player), 랭크(Rank), 포인트(Points)를 입력받는 폼이 화면에 나타납니다.
폼을 제출하면 new.php에서 처리된 응답 결과가 아래와 같이 새 창(새 탭)에 표시됩니다.
정리
target 속성을 활용하면 폼 제출 후 결과를 사용자에게 더 편리하게 보여줄 수 있습니다. 특히 검색 결과나 조회 데이터를 원래 페이지를 그대로 유지한 채 새 탭으로 열어야 할 때 target="_blank"가 매우 유용합니다. 상황에 맞게 _self, _parent, _top 등의 값을 조합해 사용해 보세요.