HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのSubmit formActionプロパティとは？使い方とコード例を解説

HTML DOM Submit formActionプロパティとは

HTML DOMのformActionプロパティは、フォームの送信ボタン（submit button）に設定されたformaction属性の値を取得または設定するために使用されます。

formactionプロパティは、ユーザーが送信ボタンをクリックした際に、フォームデータの送信先となるURLを指定します。重要なポイントとして、formAction属性の値は、<form>要素に設定されたaction属性の値を上書きするという特性があります。

formActionプロパティの基本構文

formaction属性の値を取得する

submitObject.formAction

formaction属性の値を設定する

submitObject.formAction = URL

使用例

以下は、JavaScriptを使ってformActionプロパティを操作する具体的なコード例です。

<!DOCTYPE html>
<html>
<body>
  <form action="/default-handler">
    ユーザー名: <input type="text" name="username"><br>
    <input type="submit" id="btn" formaction="/submit-handler">
  </form>
  <p id="demo"></p>
  <script>
    // formaction属性の値を取得
    let btn = document.getElementById("btn");
    document.getElementById("demo").innerHTML = btn.formAction;
    // 出力例: https://example.com/submit-handler
  </script>
</body>
</html>

formActionプロパティの主な特徴

  • 送信先URLの指定： 送信ボタンがクリックされたときに、フォームデータを送信するURLを決定します。
  • action属性の上書き： formaction属性が設定されている場合、<form>要素のaction属性よりも優先されます。
  • 動的な変更が可能： JavaScriptを使えば、実行時に送信先を動的に変更できます。

対応ブラウザ

formActionプロパティは、Chrome、Edge、Firefox、Safari、Operaといった主要なモダンブラウザでサポートされています。ただし、Internet Explorerではサポートされていないため、レガシーブラウザ対応が必要な場合は注意しましょう。

まとめ

formActionプロパティを活用することで、1つのフォーム内でも送信ボタンごとに異なる送信先を設定できるなど、柔軟なフォーム設計が可能になります。<form>要素のaction属性との関係を正しく理解しておくことで、より実践的で使いやすいWebフォームを構築できるでしょう。

  1. HTML DOMのInput Submit formNoValidateプロパティとは？使い方とサンプルコードを解説

    HTML DOM の Input Submit（送信ボタン）における formNoValidate プロパティは、送信ボタンの formNoValidate 属性値を取得・設定するために使用されます。このプロパティを使うことで、フォームデータがサーバーへ送信される際にバリデーション（妥当性検証）を行うかどうかを制御できます。<form> 要素に設定された novalidate 属性よりも優先される点が大きな特徴で、HTML5 において type=submit の input 要素向けに新たに導入されました。 構文 formNoValidate プロパティを設定する場合の構文は以下の

  2. HTML DOMのspecifiedプロパティとは？属性が指定されているか確認する方法

    HTML DOMのspecifiedプロパティは、ある属性が明示的に指定されているかどうかを判定するために使用されます。属性が指定されていればtrueを、指定されていなければfalseを返します。また、属性ノードを作成したものの、まだ要素に追加していない場合にもtrueを返すという特徴があります。構文specifiedプロパティの基本的な構文は以下のとおりです。attribute.specified使用例ここでは、画像要素にalt属性が指定されているかどうかをボタンのクリックで確認するサンプルを紹介します。<!DOCTYPE html> <html> <body&