HTML DOM 양식 대상 속성

<시간/>

HTML DOM 양식 대상 속성은 양식 데이터가 제출된 후 응답이 표시되어야 하는 위치를 지정하는 데 사용됩니다. 새 탭, 현재 탭 또는 새 창에 표시될 수 있습니다. 양식 대상 속성은 대상 속성 값을 설정하거나 가져옵니다.

구문

다음은 −

의 구문입니다.

대상 속성 설정 -

formObject.target = "_blank|_self|_parent|_top|framename"

여기서 _blank는 새 창에서 응답을 열고 _self는 동일한 창에서 응답을 엽니다. parent는 상위 프레임에서 열리고 _top은 전체 창 본문에서 열리고 framename은 지정된 명명된 프레임에서 열립니다.

예시

HTML DOM Form 대상 속성의 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<head>
<style>
   form {
      border:2px solid blue;
      margin:2px;
      padding:4px;
   }
</style>
<script>
   function SubmitForm() {
      document.getElementById("FORM1").submit();
   }
</script>
</head>
<body>
<h1>Form submit() method example</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>
</body>
</html>

출력

그러면 다음과 같은 출력이 생성됩니다. 제출을 클릭하면 동일한 창에서 응답이 열립니다. −

HTML DOM 양식 대상 속성

CHANGE 버튼을 클릭한 다음 제출을 클릭하면, 이제 응답이 새 탭에 표시됩니다 -

HTML DOM 양식 대상 속성

텍스트 유형이 있는 두 개의 입력 필드와 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() 메서드는 문서 객체 getElementById() 메서드를 사용하여

요소를 가져오고 대상 속성 값을 "_blank"로 변경합니다. 이렇게 하면 양식 데이터가 제출된 후 응답을 새 탭에 표시할 수 있습니다. 이 변경 사항은 ID가 "Sample"인 단락에 텍스트를 할당하고 innerHTML 속성을 사용하여 일부 텍스트를 사용하여 표시됩니다.

function ChangeTarg() {
   document.getElementById("FORM1").target = "_blank";
   document.getElementById("Sample").innerHTML = "The target attribute value is now _blank.";
}