HTML - formaction 屬性



HTML formaction 屬性用於指定處理輸入控制元件並提交表單時重定向到不同頁面的檔案的 URL。它會覆蓋表單元素的 action 屬性。它與影像和提交型別的輸入元素一起使用,也與 <button> 元素一起使用。

例如,如果影像型別輸入元素存在 formaction 屬性,則當用戶點選影像時,它將重定向到不同的頁面。如果使用者提交表單,它將重定向到 <form> 元素的 action 屬性中指定的 URL。

語法

<tag formaction = "URL"></tag>

應用於

以下列出的元素允許使用 HTML formaction 屬性

元素 描述
<input> HTML <input> 標籤用於接受使用者的文字輸入。
<button> HTML <button> 標籤在 HTML 中定義一個可點選的按鈕。

HTML formaction 屬性示例

下面的例子將說明 HTML formaction 屬性,以及我們應該在哪裡以及如何使用這個屬性!

帶有 formaction 屬性的 input 元素

在下面的示例中,我們將使用 type=submit 的 HTML formaction 屬性。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'formaction' attribute</title>
</head>
<body>
   <p>
       On clicking login button you will be 
       redirected to index.html page of
       tutorialspoint as mentioned according 
       to that in action attribute of form tag.
   </p>
   <form action="html/index.htm" method="get">
      <label for="">Username</label>
      <input type="text">
      <br>
      <br>
      <label for="">Password</label>
      <input type="password">
      <br>
      <br>
      <input type="submit" value="Login">
   </form>
   <br><br><hr><br>
   <p>
       Overriding the link in the action 
       attribute of form tag using formaction 
       attribute of input tag. This form will 
       redirect you to tutorialspoint main page
       even though link to html page is present 
       in action attribute.
   </p>
      <form action="html/index.htm" method="get">
      <label for="">Username</label>
      <input type="text">
      <br>
      <br>
      <label for="">Password</label>
      <input type="password">
      <br>
      <br>
      <input type="submit" 
         value="Login" 
         formaction="https://tutorialspoint.tw">
   </form>
</body>
</html>

帶有 formaction 屬性的 button 元素

考慮另一種情況,我們將使用 button 元素的 formaction 屬性。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'formaction' attribute</title>
</head>
<body>
   <!--HTML 'formaction' attribute-->
   <p>Example of the HTML 'formaction' attribute</p>
   <form action="https://tutorialspoint.tw" method="get">
      <label for="">Name</label>
      <input type="text">
      <br>
      <br>
      <label for="">Email</label>
      <input type="email">
      <br>
      <br>
      <label for="">Mobile</label>
      <input type="number">
      <br>
      <br>
      <button>Submit 1</button>
      <button formaction="/html/index.htm">Submit 2</button>
   </form>
   <p>
      Submit 1 will redirect you home page of tutorialspoint 
      as it's mentioned in action attribute of form tag, while 
      submit 2 will override this using formaction and will submit 
      to html page of tutorialspoint.
   </p>
</body>
</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
formaction 9.0 10.0 4.0 5.1 15.0
html_attributes_reference.htm
廣告