この記事で分かること
form.actionの基本的な役割- 送信先 URL の取得方法と設定方法
- HTML の
action属性との違い - 最低限知っておくべきフォーム送信の仕組み
form.action は、フォームが送信される URL（action 属性）を参照・設定するためのプロパティです。
JavaScript を使うと、HTML に書かれた action の値を読み取ったり、別の URL に書き換えたりできます。
この記事では、form.action の基礎だけに絞って、初心者でも理解しやすいように解説します。
form.action とは？（基礎）
HTML の action="" と同じく、フォーム送信時の送信先 URL を表すプロパティです。
- 現在の送信先 URL を取得できる
- JavaScript で送信先を変更できる
まずは「取得」と「設定」の2つを理解すれば十分です。
送信先 URL を取得する
現在設定されている送信先 URL を確認できます。
const form = document.forms[0];
console.log(form.action);
→ HTML に書かれた action の値が返されます。
送信先 URL を設定する
JavaScript から送信先を変更できます。
form.action = "send.php";
→ フォーム送信時の URL が send.php に変更されます。
HTMLの action 属性との違い
HTML の action="" と JavaScript の form.action は役割は同じですが、次の違いがあります。
- HTML：静的に設定（ページ読み込み時に決まる）
- JavaScript：動的に変更可能（ユーザー操作に応じて変更できる）
まずは「HTML で設定 → 必要に応じて JavaScript で変更」という流れを理解すればOKです。
最小限のサンプルコード
基礎だけを理解するための最小サンプルです。
<form id="myForm" action="default.php">
<input type="submit" value="送信">
</form>
<script>
const form = document.getElementById("myForm");
form.action = "changed.php"; // 送信先を変更
</script>
→ このように、JavaScript で action を上書きできます。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- フォーム送信や DOM の基礎を順序立てて理解したい
form.action のようなフォーム送信の仕組みは、JavaScript の基礎知識（DOM・イベント・属性操作）と密接に関係しています。
書籍ではこれらを体系的に順序立てて学べるため、基礎理解が大きく深まります。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
フォーム操作・イベント処理・DOM の基本が丁寧に解説されており、form.action の基礎理解にもつながります。
この本で解決できること：
- フォームと入力欄の仕組みを視覚的に理解できる
- DOM を使った属性操作（
actionなど）の基礎が分かる - 実際に動くサンプルで学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
DOM 操作・フォーム送信・イベント処理など、実務で必要な基礎力がしっかり身につきます。
この本で解決できること：
- フォーム送信の仕組みを体系的に理解できる
- 属性操作（
actionなど）を含む DOM の基礎が身につく - 現代的な JavaScript の書き方をまとめて習得
動画で理解を深めたい方へ（Udemy講座）
form.action のようなフォーム送信の仕組みは、実際の動きを動画で見ると理解が一気に深まります。
Udemy では DOM・イベント・フォーム操作を丁寧に解説した講座が多数あります。
初心者のためのJavaScript 完全入門
JavaScriptの基礎を体系的に学べる人気講座です。
フォーム送信・イベント処理・DOM の基礎が丁寧に扱われており、form.action の理解にも役立ちます。
この講座で解決できること：
- フォーム送信の流れを視覚的に理解できる
action属性の仕組みと DOM 操作の基礎が分かる- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、フォーム送信を含む DOM 操作を深く理解したい方に最適です。
この講座で解決できること：
form.actionを使った送信先変更の基礎が身につく- フォーム送信・バリデーションなど実務的な処理を学べる
- 現代的な DOM 操作をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- フォーム送信の仕組み（
action/method）が曖昧なまま進んでしまう - DOM 操作の基礎が理解しきれない
- コードレビューを受ける機会がない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
form.action を含むフォーム制御や DOM 操作の基礎を
丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすいフォーム処理のポイントを事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
form.action に関するよくある質問（FAQ）
action を空にするとどうなる？
action を空にすると、フォームは現在のページに送信されます。
form.action と getAttribute("action") の違いは？
form.action は絶対URLに変換されますが、getAttribute("action") は HTML に書かれた値をそのまま返します。
JavaScript で action を変更すると HTML に反映される？
DOM 上では変更されますが、HTML ソースには反映されません。
action の変更はいつ行うのが正しい？
一般的には onsubmit 内で行うのが安全です。ユーザー操作に応じて確実に送信前に変更できます。
まとめ
form.actionは送信先 URL を参照・設定するプロパティ- 取得と設定の2つを理解すれば基礎はOK
- HTML の
actionと JavaScript のform.actionは役割は同じ - 動的変更は別記事（応用編）で詳しく解説
