2026년 상식닷컴 선정 식당 & 카페 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요

HTML에서 `<form>`의 target 속성은 어떻게 사용하나요?

_____
Q1: HTML `
`의 `target` 속성이란 무엇인가요?
`target` 속성은 폼을 제출할 때 그 결과를 어디에 표시할지를 지정하는 속성입니다. 제출한 데이터를 받아 처리한 서버의 응답 페이지가 열리는 위치(창, 프레임 등)를 설정할 수 있습니다.

---

Q2: `target` 속성에 지정할 수 있는 값에는 어떤 것들이 있나요?
- `_self` : 기본값으로, 현재 창이나 프레임에서 결과를 표시합니다.
- `_blank` : 새 창이나 새 탭에서 결과를 표시합니다.
- `_parent` : 부모 프레임에서 결과를 표시합니다.
- `_top` : 전체 윈도우(프레임이 중첩된 경우 최상위 프레임)에서 결과를 표시합니다.
- 특정 프레임 혹은 `





```
위 예제는 폼을 제출하면 응답 결과가 `resultFrame`이라는 이름을 가진 iframe 안에 표시됩니다.

---

Q5: `target` 속성을 사용 시 주의할 점이 있나요?
- `_blank` 사용 시 보안 위험(예: 탭 납치)을 막으려면 `rel="noopener noreferrer"` 속성을 링크에 추가하는 것이 좋지만, 폼의 경우 별도로 적용할 수 없으므로 자바스크립트로 새 창을 띄우는 방식을 권장할 수 있습니다.
- 프레임이나 iframe이 없는 페이지에서 특정 이름을 지정하면 새 창이 열릴 수 있으므로 의도한 동작인지 확인해야 합니다.

---

Q6: `target` 속성이 없는 경우 어떻게 되나요?
기본적으로 `_self` 값으로 동작하므로, 폼 제출 시 현재 페이지가 결과 페이지로 대체됩니다.

---

이처럼 `
`의 `target` 속성은 폼 제출 결과를 어디서 보여줄지 제어하는 데 사용되며, 적절한 값을 지정해 사용자 경험을 향상시킬 수 있습니다.
HTML에서 `<form>` 요소는 사용자로부터 데이터를 수집하고 이를 서버로 전송하는 데 사용됩니다. 이때 `target` 속성은 폼 데이터가 제출될 때 결과를 표시할 위치를 지정하는 데 중요한 역할을 합니다. `target` 속성은 다음과 같은 값들을 가질 수 있습니다: 1. `_self` : 기본값으로, 현재 창이나 탭에서 폼이 제출됩니다. 사용자가 폼을 제출하면 결과 페이지가 현재 페이지를 대체합니다. 2. `_blank` : 새로운 창이나 탭에서 폼이 제출됩니다. 사용자가 폼을 제출하면 결과 페이지가 새로운 창 또는 탭에서 열립니다. 이 옵션은 사용자가 원래 페이지를 유지하면서 결과를 확인할 수 있도록 합니다. 3. `_parent` : 현재 프레임의 부모 프레임에서 폼이 제출됩니다. 만약 현재 페이지가 프레임 안에 있다면, 부모 프레임이 결과를 표시하게 됩니다. 4. `_top` : 현재 페이지의 <a href='https://sangseek.com/sangseeks/최상위/ko'>최상위</a> 프레임에서 폼이 제출됩니다. 이 값은 여러 개의 프레임이 있는 상황에서 유용하며, 모든 프레임을 제거하고 최상위 페이지로 결과를 표시합니다. 5. 특정 프레임 이름 : 만약 특정 프레임에 결과를 표시하고 싶다면, 해당 프레임의 이름을 `target` 속성에 지정할 수 있습니다. 예를 들어, `<iframe name="myFrame"></iframe>`가 있다면, `<form target="myFrame">`와 같이 사용할 수 있습니다. 이 경우, 폼 제출 결과는 `myFrame`이라는 이름을 가진 프레임에 표시됩니다. 사용 예시 아래는 `target` 속성을 사용하는 간단한 HTML 폼의 예시입니다: ```html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-<a href='https://sangseek.com/sangseeks/scale/ko'>scale</a>=1.0"> <title>폼 예제</title> </head> <body> <h1>폼 제출 예제</h1> <form action="<a href='https://sangseek.com/sangseeks/sub/ko'>sub</a>mit.php" method="post" target="_blank"> <<a href='https://sangseek.com/sangseeks/label/ko'>label</a> for="name">이름:</label> <input type="text" id="name" name="name" required> <label for="email">이메일:</label> <input type="email" id="email" name="email" required> <input type="submit" value="제출"> </form> </body> </html> ``` 위의 예제에서 사용자가 폼을 제출하면, `submit.php` 페이지가 새로운 탭에서 열리게 됩니다. 이렇게 하면 사용자는 원래 페이지를 유지하면서 결과를 확인할 수 있습니다. 주의사항 - `target` 속성을 사용할 때는 사용자의 경험을 고려해야 합니다. 예를 들어, 사용자가 폼을 제출했을 때 새로운 탭이 열리는 것이 불편할 수 있으므로, 상황에 맞게 적절한 값을 선택하는 것이 중요합니다. - 브라우저의 팝업 차단 기능이 활성화되어 있는 경우, `_blank`로 설정한 경우 새로운 탭이 열리지 않을 수 있습니다. 이 점도 고려해야 합니다. - <a href='https://sangseek.com/sangseeks/웹 접근성/ko'>웹 접근성</a>을 고려하여, 사용자가 폼 제출 후 어떤 행동을 할 수 있는지 명확하게 안내하는 것이 좋습니다. 이와 같이, `<form>`의 `target` 속성은 폼 제출 결과를 표시할 위치를 제어하는 데 중요한 역할을 하며, 사용자 경험을 향상시키는 데 기여할 수 있습니다.
작성자: 정재원 [비회원] | 작성일자: 1년 전 2024-09-09 08:40:28
조회수: 313 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.