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