Thuộc tính mục tiêu HTML DOM Form

Thuộc tính đích HTML DOM Form được sử dụng để xác định nơi phản hồi sẽ được hiển thị sau khi dữ liệu biểu mẫu đã được gửi. Nó có thể hiển thị trong một tab mới, tab hiện tại hoặc một cửa sổ mới. Thuộc tính mục tiêu biểu mẫu đặt hoặc nhận giá trị thuộc tính mục tiêu.

Cú pháp

Sau đây là cú pháp cho -

Đặt thuộc tính mục tiêu -

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

Tại đây, _blank sẽ mở phản hồi trong cửa sổ mới, _self sẽ mở phản hồi trong cùng cửa sổ; cha sẽ mở trong khung mẹ, _top sẽ mở trong toàn bộ nội dung cửa sổ và framename sẽ mở nó trong một khung có tên được chỉ định.

Ví dụ

Hãy để chúng tôi xem xét một ví dụ về thuộc tính mục tiêu 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>

Đầu ra

Điều này sẽ tạo ra kết quả sau. Khi nhấp vào gửi, phản hồi sẽ mở ra trong cùng một cửa sổ -

Thuộc tính mục tiêu HTML DOM Form

Khi nhấp vào nút THAY ĐỔI và sau đó nhấp vào gửi; phản hồi bây giờ sẽ được hiển thị trong một tab mới -

Thuộc tính mục tiêu HTML DOM Form

Nó chứa hai trường đầu vào với loại văn bản và một nút có tên là 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>

Sau đó, chúng tôi tạo một nút CHANGE sẽ thực thi phương thức changeTarg () khi người dùng nhấp vào -

<button onclick="ChangeTarg()">CHANGE</button>

Phương thức ChangeTarg () sẽ lấy phần tử

bằng cách sử dụng phương thức getElementById () của đối tượng tài liệu và thay đổi giá trị thuộc tính mục tiêu của nó thành “_blank”. Điều này cho phép phản hồi sau khi dữ liệu biểu mẫu đã được gửi để hiển thị trong một tab mới. Sau đó, thay đổi này được hiển thị bằng cách sử dụng một số văn bản bằng cách gán văn bản cho đoạn văn có id là “Sample” và sử dụng thuộc tính innerHTML của nó:

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