HTML DOM Form target屬性用法及代碼示例

HTML DOM 表單目標屬性用於指定提交表單數據後應在何處顯示響應。它可以顯示在新選項卡、當前選項卡或新窗口中。表單目標屬性設置或獲取目標屬性值。

用法

以下是語法 -

設置目標屬性 -

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

這裏，_blank 將在新窗口中打開響應，_self 將在同一窗口中打開響應； parent 將在父框架中打開，_top 將在完整的窗口主體中打開，而 framename 將在指定的命名框架中打開它。

示例

讓我們看一個 HTML DOM 表單目標屬性的例子 -

<!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>

輸出

這將產生以下輸出。單擊提交時，響應將在同一窗口中打開 -

單擊“更改”按鈕，然後單擊“提交”；響應現在將顯示在新選項卡中 -

它包含兩個文本類型的輸入字段和一個名為 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>

然後我們創建了一個按鈕 CHANGE，當用戶點擊時，它將執行 changeTarg() 方法 -

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

ChangeTarg() 方法將使用文檔對象 getElementById() 方法獲取 <form> 元素，並將其目標屬性值更改為 “_blank”。這允許在 form-data 提交後的響應顯示在新選項卡中。然後通過將文本分配給具有 id “Sample” 的段落並使用其 innerHTML 屬性，使用一些文本顯示此更改：

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

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Form target property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。