📜  HTML | DOM 输入图像 formTarget 属性(1)

📅  最后修改于: 2023-12-03 15:31:14.127000             🧑  作者: Mango

HTML | DOM 输入图像 formTarget 属性

在HTML文档中,输入图像元素允许用户从本地设备中选择一个图像并将其上传到服务器的文件。formTarget 属性用于指定在提交表单数据后,在哪个窗口中打开服务器响应。本文将介绍 formTarget 属性的语法、取值和用法,方便开发者进行相关功能的开发和优化。

语法

formTarget 属性是输入图像元素的一个属性,它可以包含以下值:

<input type="file" formtarget="_self|_parent|_top|framename">

其中:

  • _self: 如果服务器响应是整个页面,则在当前窗口中加载响应。
  • _parent: 如果响应是在父窗口中打开,则在父窗口中加载响应。
  • _top: 如果响应是在顶层窗口中打开,则在顶层窗口中加载响应。
  • framename: 如果响应是在框架中打开,则在名称为 framename 的框架中加载响应。

取值

formTarget 属性可以包含以下取值:

  • _self:在当前窗口中加载响应。
  • _parent:在父窗口中加载响应。
  • _top:在顶层窗口中加载响应。
  • framename:在名称为 framename 的框架中加载响应。

用法

formTarget 属性一般与表单

和输入图像 元素一起使用。我们可以在一个表单中包含多个输入图像元素,每个输入图像元素的formTarget属性可以指定不同的响应窗口。以下示例演示了如何使用formTarget属性在不同的窗口中打开响应。

<form action="/submit-form" method="post" target="_blank">
  <label for="image1">选择图片1:</label>
  <input type="file" name="image1" formtarget="_self">

  <label for="image2">选择图片2:</label>
  <input type="file" name="image2" formtarget="_parent">

  <label for="image3">选择图片3:</label>
  <input type="file" name="image3" formtarget="_top">

  <label for="image4">选择图片4:</label>
  <input type="file" name="image4" formtarget="myFrameName">
</form>

上述示例中,表单的目标是_blank,也就是在新的浏览器窗口或标签页中打开响应。但是,每个输入图像元素都设置了不同的响应窗口,分别是_self、_parent、_top和myFrameName。

需要注意的是,如果在表单中使用了formTarget属性,则表单的target属性会被忽略。而如果在输入图像元素中没有设置formTarget属性,则使用表单的target属性。同时,如果一个输入图像元素使用了formTarget属性,则其他输入图像元素不受影响,它们仍将使用表单的target属性。

结论

formTarget属性是一个用于输入图像元素的属性,在提交表单数据后指定响应在哪个窗口中打开。它可以取_self、_parent、_top和framename值。同时,如果在表单中使用了formTarget属性,则表单的target属性会被忽略。需要注意的是,如果一个输入图像元素使用了formTarget属性,则其他输入图像元素不受影响,它们仍将使用表单的target属性。