HTML DOM 表单 target 属性
htmlweb developmentfront end technology更新于 2025/9/27 21:00:17
HTML DOM 表单 target 属性用于指定表单数据提交后响应的显示位置。它可以显示在新选项卡、当前选项卡或新窗口中。表单 target 属性设置或获取 target 属性值。
语法
以下是 − 的语法
设置 target 属性 −
formObject.target = "_blank|_self|_parent|_top|framename"
此处，_blank 将在新窗口中打开响应，_self 将在同一窗口中打开响应; parent 将在父框架中打开，_top 将在完整窗口主体中打开，framename 将在指定名称的框架中打开。
示例
让我们看一个 HTML DOM 表单 target 属性的示例 −
<!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>
输出
这将产生以下输出。点击"提交"后，响应将在同一窗口中打开 −
点击"更改"按钮，然后点击"提交"后，响应将显示在新标签页中 −
它包含两个文本类型的输入字段和一个名为"提交"的按钮 −
<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> 元素，并将其 target 属性值更改为 “_blank”。这允许在提交表单数据后在新选项卡中显示响应。然后，通过将文本分配给 ID 为 “Sample” 的段落并使用其 innerHTML 属性，使用一些文本显示此更改:
function ChangeTarg() {
document.getElementById("FORM1").target = "_blank";
document.getElementById("Sample").innerHTML = "The target attribute value is now _blank.";
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
