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

HTML DOM フォームの action プロパティとは？使い方とサンプルコードを解説

HTML DOM の action プロパティは、form 要素の action 属性と連動するプロパティです。フォームがユーザーによって送信（サブミット）された際に、入力データをどのページへ送信するかを指定します。つまり、フォーム送信後にデータの送信先を決定するために呼び出される属性です。

JavaScript からこのプロパティを操作することで、状況に応じてフォームの送信先を動的に変更できるのが大きな特徴です。

構文

action プロパティの基本的な構文は以下の通りです。

action プロパティの値を設定する場合

formObject.action = URL

ここで指定する URL は、フォームデータの送信先アドレスです。絶対URL（https://example.com/sample.php など）と相対URL（/sample.php など）のどちらでも指定できます。

使用例

それでは、フォームの action プロパティを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    form {
        border: 2px solid blue;
        margin: 2px;
        padding: 4px;
    }
</style>
<script>
    function changeAction() {
        document.getElementById("FORM1").action = "/example_web.asp";
        document.getElementById("Sample").innerHTML = "フォームのaction属性の値が /example_web.asp に変更されました";
    }
</script>
</head>
<body>
<h1>Form action プロパティの例</h1>
<form id="FORM1" action="/sample.php">
<label>ユーザー名 <input type="text" name="usrN"></label> <br><br>
<label>パスワード <input type="password" name="pass"></label>
</form>
<br>
<button onclick="changeAction()">変更</button>
<p id="Sample"></p>
</body>
</html>

実行結果

このコードを実行すると、以下のような画面が表示されます。

HTML DOM フォームの action プロパティとは？使い方とサンプルコードを解説

「変更」ボタンをクリックすると、次のように表示が変化します。

HTML DOM フォームの action プロパティとは？使い方とサンプルコードを解説

コードの解説

上記の例では、以下のような処理を行っています。

1. フォームの作成

まず、id 属性に「FORM1」、action 属性に「/sample.php」を指定したフォームを作成しています。action 属性の値により、フォームデータは sample.php ページへ送信されることが決まっています。これは相対URLによる指定です。フォーム内には、テキスト入力欄とパスワード入力欄の2つのフィールドが含まれています。

<form id="FORM1" action="/sample.php">
<label>ユーザー名 <input type="text" name="usrN"></label> <br><br>
<label>パスワード <input type="password" name="pass"></label>
</form>

2. 変更ボタンの設置

次に、クリックされると changeAction() メソッドを実行するボタンを作成しています。

<button onclick="changeAction()">変更</button>

3. changeAction() 関数の処理内容

changeAction() 関数では、まず getElementById() メソッドで「FORM1」要素を取得し、その action プロパティの値を「/example_web.asp」に書き換えています。さらに、id が「Sample」である段落要素の innerHTML プロパティを使い、変更内容を示すテキストを画面に表示してユーザーに通知しています。

function changeAction() {
    document.getElementById("FORM1").action = "/example_web.asp";
    document.getElementById("Sample").innerHTML = "フォームのaction属性の値が /example_web.asp に変更されました";
}

このように、JavaScript を使えばフォームの送信先をページ遷移なしで動的に切り替えられます。ログイン処理や条件分岐による送信先の振り分けなど、実際のWeb開発でもよく使われるテクニックなので、ぜひ覚えておきましょう。

  1. HTML DOM Textareaのformプロパティとは？使い方をサンプル付きで解説

    Textarea の form プロパティとは？HTML DOM の Textarea オブジェクトが持つ form プロパティは、対象のテキストエリア（<textarea> 要素）を囲んでいる <form> 要素への参照を返します。このプロパティを利用すると、JavaScript からそのテキストエリアがどのフォームに所属しているのかを簡単に特定できます。なお、テキストエリアがどのフォームにも属していない場合は null が返される点に注意してください。構文form プロパティの基本的な構文は次のとおりです。object.form戻り値テキストエリアを含む <f

  2. HTML DOM Object の form プロパティとは？使い方とサンプルコードを解説

    HTML DOM Object の form プロパティとはHTML DOM の form プロパティは、<object> 要素が配置されている親フォーム（enclosing form）への参照を返すプロパティです。このプロパティを使うことで、JavaScript からオブジェクト要素がどのフォームに属しているかを動的に取得できます。構文form オブジェクトへの参照を取得する場合、以下のように記述します。ObjectElement.form戻り値として、該当する <object> 要素を囲んでいるフォームオブジェクトが返されます。もし <object> 要