HTML | DOM 输入图像 formAction 属性

简介

HTML中的formAction属性用于指定表单提交时数据应该发送到哪个URL。在多数情况下，该属性与form元素的action属性具有相同的值，但在某些情况下，它可以被用来覆盖这个默认值，从而使表单数据通过不同的URL进行提交。

语法

formaction属性的基本语法如下：

<input formaction="URL">
<button formaction="URL"></button>
<input type="image" formaction="URL">

属性值

formaction属性可以接受任何URL作为值。如果在这个属性中指定的URL与form元素自己的action属性不同，则表单会被以阻止默认行为的方式提交到该URL。

用法示例

以下是使用formaction属性的三个示例：

<!-- 例1：使用form元素的action属性提交表单数据 -->
<form action="https://example.com/sample-form-handler" method="post">
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

<!-- 例2：使用formaction属性提交表单数据 -->
<form action="https://example.com/another-form-handler" method="post">
  <input type="text" name="username">
  <button type="submit" formaction="https://example.com/sample-form-handler">Submit</button>
</form>

<!-- 例3：使用formaction属性提交表单数据（input type="image"） -->
<form action="https://example.com/another-form-handler" method="post">
  <input type="text" name="username">
  <input type="image" src="submit-button.png" alt="Submit" formaction="https://example.com/sample-form-handler">
</form>

在示例中，第一个表单通过form元素自己的action属性提交表单数据。在第二个表单中，我们使用button元素的formaction属性将表单数据发送到另一个URL。在第三个表单中，我们使用input元素的type="image"属性和formaction属性提交表单数据。

注意事项

• formaction属性只有在其值不等于form元素的action属性时才有意义。
• 如果formaction属性与form元素的action属性相同，则该属性无效，表单仍会被提交到form元素的action属性所指定的URL上。
• 如果同时使用了form元素的action属性和button/input元素的formaction属性，那么表单将被提交到button/input元素的formaction属性所指定的URL上。

结论

HTML中的formaction属性是一个非常方便的工具，可以帮助我们在某些情况下灵活地处理表单提交。它允许我们使用默认的提交URL，同时又能够针对特定的表单控件，覆盖默认URL。学会合理使用这个属性，可以使我们的表单处理过程更加高效和灵活。