TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでフォームの送信先を操作する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

JavaScriptでフォームの送信先を操作する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでフォームの送信先を操作する方法について現役エンジニアが解説しています。フォームの送信先は、action属性に設定されたURLになります。JavaScriptで送信先を操作するには、submitボタンが押された時にaction属性を変更するようにします。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

JavaScriptでフォームの送信先を操作する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

JavaScriptでフォームの送信先を操作する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

フォームオブジェクト(form)とは

HTMLのformタグで囲われた箇所をプログラムで取得したものになります。formタグは会員登録の画面などで入力項目と送信ボタンを囲うHTMLタグです。

今回はJavaScriptでこのformタグを取得し（フォームオブジェクト）、操作をしてみます。

フォームオブジェクトのactionとは

actionはHTMLのformタグの属性です。actionには主に入力項目の送信先URLを下記のように指定して使用します。

<form action="https://techacademy.jp/">

これにより画面の送信ボタンなどを押した際に、formタグで囲われた入力欄の値が指定したURLに送られます。

[PR] コーディングで副業する方法とは

JavaScriptでフォームの送信先を設定する方法

基本的な処理は下記の2つです。

1、formタグをJavaScriptで取得する
2、取得したformオブジェクトのactionを書き換える

formタグのactionにURLを設定してあるので、送信ボタンなどを押せば設定したURLに入力内容は送信されるのですが、入力内容に応じて送信先を変更したい場合などはこの方法で書き換えると便利です。

実際に書いてみよう

HTMLのソースコード

メールアドレスで会員登録するような画面を簡易的に記述しています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <form action="【送信先URL】" id="formId" onsubmit="changeAction()">
      メールアドレス　<input type="text">
      <input type="submit" value="送信する">
    </form>
  </body>
</html>

 

JavaScriptのソースコード

送信先のURLを書き換える処理です。

function changeAction(){
  var formObject = document.getElementById('formId');
  formObject.action = "【送信先URL】";
}

 

解説

HTMLのformタグの属性で「onsubmit=”changeAction()”」としたことで、送信するボタンを押した際にJavaScriptのchangeActionという関数が呼び出されます。

JavaScriptの関数changeActionでは、「document.getElementById(‘formId’);」とHTMLのformタグのidを指定することでformオブジェクトを取得しています。

後は「formObject.action = “【送信先URL】”;」のようにactionの指定URLを書き換えるだけです。

これにより、書き換えたURLに入力した値（ここではメールアドレス）が送信されます。もちろん書き換えなければHTMLのformタグに指定した送信先URLに送信となります。

筆者プロフィール

横山茂雄（よこやましげお）

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptのDocumentインターフェースとidプロパティについて現役エンジニアが解説【初心者向け

JavaScriptのDocumentインターフェースとidプロパティについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向...
JavaScript

JavaScriptのconfirmメソッドでポップアップの文字色を変更する方法を現役エンジニアが解説【初心者

JavaScriptのconfirmメソッドでポップアップの文字色を変更する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用...
JavaScript

JavaScriptのfor文とforEachメソッドの違いについて現役エンジニアが解説【初心者向け】

JavaScriptのfor文とforEachメソッドの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説し...
JavaScript

JavaScriptで要素の表示・非表示を切り替える方法を現役エンジニアが解説【初心者向け】

JavaScriptで要素の表示・非表示を切り替える方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 ...
JavaScript

【入門編】初心者におすすめ！jQueryを勉強できる本5選

昨今はネットで情報が簡単に手に入るようになり、プログラミングの勉強をする際もネットで済ます方も増えてきました。 しかし、より理解を深めるためには、プロの手...
JavaScript

jQueryでonメソッドを使ってイベントの処理を設定する方法【初心者向け】

JavaScriptのライブラリであるjQueryでonメソッドを使ってイベントを設定する方法を解説しています。jQueryを使う上でよく使用するメソッドなので...
JavaScript

あわせてよく読まれている記事

PHPでフォームからデータを受け取る方法（GETとPOST）

プログラミング初心者向けに、PHPの基礎を紹介する記事です。 今回は、フォームからデータを受け取る方法について解説します。 最初にフォームの送信方法とPHPでの受け取り方に関しての説明をします。 その後、実際に動くコードを作成してデータの送受信を試していきます。 フォームでのデータのやりとりはWebサイトなどでは基本なので、ぜひ覚えておきましょう。   目次 GETとPOSTとは HTMLのフォーム 送信されるデータ フォームデータの受け取り方 受信データのバリデーション 実際にコードを書いてみよう 開発環境はXAMPPを使っています。   GETとPOSTとは PHPにおけるデータの受け取り方には、GETリクエスト と POSTリクエスト を使う2通りの方法があります。 POSTリクエストはフォームからHTTP通信により送信され、送信データはリクエストの本体に含まれます。 GETリクエストはフォームやリンクからHTTP通信により同じように送信されますが、送信データはURLの最後に？に続いて　パラメータ名=値という形式で付加されます。     大石ゆかり フォームを使ってデータを送信できるんですね。 田島悠介 そうなんだ。フォームから送ったデータを、PHPで取得できるんだよ。 大石ゆかり いろいろなところで使われてそうですね。 田島悠介 そうだね。後、フォームじゃないんだけどURLの最後に?p=2とか/p2/もGETでデータを送ってることになるんだ。 多くは何ページ目とかに使われるね。HTMLでフォームを作って送信してみよう！ [PR] コーディングで副業する方法とはHTMLのフォーム サーバにデータを送信するためには、HTMLのフォームを使います。 GETリクエストのフォーム フォームの構造は次のようなコードです。 <form action = “index.php” method = “GET”> <input type = “text” name =“comment/“><br/> <input type = “submit” value =“送信/“> </form> formタグのaction属性に送信先のURLを指定します。 送信方法はデフォルトでGETリクエストですが、method属性で POSTかGETに指定できます。 formタグ内の inputタグの値が送信するデータです。 この時、name属性がリクエストパラメータ名になり、value属性の値やテキストボックスに入力された値がそのパラメータの値です。 上のコードでは、フォームのデータは、commentというパラメータ名で入力値とのペアで送られ、送信方法はGETリクエストになり、送り先は index.php です。 POSTリクエストのフォーム POSTリクエストにしたい場合は、次のようにform要素のmethod属性をPOSTに変更するだけです。 <form action = “index.php” method = “POST”> <input type = “text” name =“comment/“><br/> <input type = “submit” value =“送信/“> </form> 送信されるデータ ここでは、例としてcommentという名前属性のinput要素に hogehogeという文字を入力して送信するとしましょう。 GETリクエストのデータ データがURLの一部として含まれてサーバに送られます。 送信先は index.phpとすると、URL全体は次のようになります。 http://index.php?comment=hogehoge ここで注目していただきたいのは、後に付けた?comment=hogehogeの部分です。 GETリクエストのデータは基本的には、 ? の後に パラメータ名=値のペアの形式で送られます。 複数のデータの場合は、間を & でつなげます。 http://index.php?comment=hogehoge&title=hello このURLで送られるのは、 comment=hogehogeとtitle=helloという２つのデータ（パラメータ名=値のペア）です。     フォームデータの受け取り方 GETリクエストで送信したデータを受け取る GETリクエストで送信したデータは、グローバル変数である $_GET に連想配列という形で入っています。 そこで、PHPでデータを受け取るときは、この　$_GET を使います。 先ほどの例では、comment=hogehogeというデータが送られましたが、$_GETには、[‘comment’ => ‘hogehoge’] という連想配列で保存されます。 $_GETからデータを受け取るには、受け取りたいinput要素の name属性
PHP

Laravelでformを使う方法【初心者向け】現役エンジニアが解説

今回は、Laravel のFormを利用してフォームの作成を行っていきます。 LaravelのFormを利用することで、ブラウザ画面からフォームを利用してデータを送信することが可能になります。 実務でもWebアプリケーションを開発する際、ユーザーがデータをフォーム入力して、データベースに登録する処理はよく利用しますので、非常に実践的な内容になっています。 目次 Formとは Formの例 Laravelとは Laravel の始め方 tinker の使い方 Mysqlの設定 Mysqlの利用 Laravelの処理 Laravel Collectiveの使い方   Formとは WebアプリケーションでFormというと、企業ページへのお問い合わせフォームであったり、SNSの投稿フォームだったり、多岐にわたり多用されます。 このFormという単語ですが、初学者の頃は、Fromと混同しやすくタイプミスが発生する点に注意していただくと、学習がスムーズです。   今回は、LaravelのライブラリであるLaravel CollectiveというライブラリのFormファサードを利用して実装していきます。 Formファサードとはデザインパターンで言うところの、複数のクラスを利用する上で窓口となるクラスを利用して、依存関係を含めシンプルに処理を実装することができる仕組みです。 デザインパターンというのは、プログラミングのアルゴリズムを定型化することで、誰でも高品質な処理を実装することができる考え方です。   アルゴリズムというのは、プログラミングの処理の流れです。 例えば、子供の頃、迷路の本などで入り口から出口までなぞり書きしたことがあるかと思います。 入り口から出口まで後戻りせず、一筆書きで迷路をクリアする処理をアルゴリズムとイメージすると良いかもしれません。   クラスとは、あるオブジェクトの設計図です。 オブジェクトを作るためには設計図を設計した上で、設計図に基づいてオブジェクトの作成が必要です。   オブジェクトとは、クラスという設計図から生成される製品です。 家を例にすると、家という製品（オブジェクト）は、柱や壁や電気や水道やガスなどいろいろな部品によって、クラスという設計図に基づいて構成されています。 つまり、家の設計図がクラスで、実際の家がオブジェクトというイメージになります。   そして、実際の製品をインスタンスと呼びます。 これは、生成する家が全く同じクラス（設計図）に基づくオブジェクト（製品）であっても、インスタンス（田中様の家）、インスタンス（鈴木様の家）というように、生成後は別の意味を持った家になるためです。 家の設計図であるクラスを利用して、様々な家を集積するようなWebアプリケーションを実装する場合、家というクラスだけでなく、車というクラスや、お店というクラスもあるかもしれません。 どの家とどの車が同じ所有者で、その所有者はお店も所有しているのか、お店を利用するだけなのか、というようにクラス同士が連動して動作する場合、最終的なWebアプリケーションがクラスでごちゃごちゃになりかねません。 そこで、Formファサードのような依存関係をシンプルに実装してくれる機能を利用していくと、実務でも保守のしやすい素敵なアプリケーションを実装可能になります。   [PR] コーディングで副業する方法とはFormの例 今回は次のようなFormタグを利用します。 Form::model Form::modelで、モデルデータと連動しながらForm処理を開始します。 そうでない場合は、Form::openを利用することができます。   Form::label Form::labelで、ラベルの生成処理をします。   Form::text Form::textで、テキストボックスの生成処理をします。   Form::submit Form::submitで、送信表示の生成処理をします。   Form::close Form::closeで、Formタグの実装を終了します。   今回利用するFormタグ以外にも、たくさんのFormタグが存在するので、Laravel Collectiveの公式ページを参考にしていただくと良いですよ。 LaravelCollective | HTML v6.x   Laravelとは Laravelとは、PHPでWebアプリケーションを開発する際、セキュリティも高く、効率的な開発をすることができるフレームワークです。 フレームワークとは、Web開発における共通処理であるライブラリを呼び出すことで、効率的にWebアプリケーションを開発することができるツールです。 ライブラリとは、よく利用する便利な処理をまとめて実装しているプログラムです。 同じような処理をしているライブラリが、世界中に存在するため、どのライブラリを呼び出し利用するかはプログラマーが考えて決定します。   Laravel の始め方 今回解説する実装環境は、PHP7.2系とLaravel6系とMySQL5.6系です。 MySQLの最新バージョンはMySQL8系ですが、実行環境の都合でMySQL5.6系ですので、基本的にはMySQL8系でも同じ考え方をしていただくと良いです。 今回はcomposerコマンドを利用して、techacademyというプロジェクト名で、Laravel6.x系最新版で立ち上げます。 ^6.0 と書けば、バージョン6.xの最新版が選択されます。   コマンド composer create-project --prefer-dist laravel/laravel techacademy ^6.0 Laravelのインストール方法やcomposerのインストール・使い方についてはこちらの記事を参考にしてみてください。   Laravelのバージョン Laravelの現在の最新バージョンはLaravel8です。 しかし、Laravel6を利用するのは、Laravel6がLTSというバージョンだからです。 LTSとは、長期に渡りサポートされるバージョンを意味します。 最終的なサポート期間がLaravel6のほうがLaravel8よりも長いため、実務ではLaravel6を利用することが多いです。 バージョン 公開日 セキュリティサポート 8.0 2020年9月8日 2021年9月8日まで 7.0 2020年3月3日 2021年3月3日まで 6.0 2019年9月3日 2022年9月3日まで   tinker の使い方 Laravelでは php artisan tinker というコマンドを実行すると、Laravelの機能を実行するREPLが起動します。 REPLとは対話型コマンドでアプリケーションを操作する方法です。   tinkerの起動方法 コマンドラインで次のコマンドを入力するとtinkerが起動します。 php artisan tinker   tinkerの終了方法 REPLの実行中は、行頭に>>>が表示されています。 その状態でexitと入力することでtinkerを終了することができます。 >> exit   MySQLの設定 いくつかMySQLの設定が必要です。 代表的な設定を抜粋して解説します。   config/database.php 設定内容 'default' => env('DB_CONNECTION', 'mysql'), 解説 ここでは、MySQLを利用するという指定をしています。   .env 設定内容 DB_DATABASE=techacademy 解説 ここではtechacademyというデータベースを利用する指定をしています。   MySQLの利用 MySQLの起動 コマンド sudo service mysql start sudo mysql -u root 解説 MySQLが未起動の場合、sudo service mysql startでMySQLを起動します。 sudo mysql -u rootでMySQLにログインします。 今回は学習用なので、ユーザー名がrootでパスワードがないパターンのログインコマンドです。 実務で利用する場合は、任意のログイン情報を設定していただく必要がございます。   techacademyデータベースを作成 コマンド CREATE DATABASE `techacademy`; 解説 MySQLにログイン後CREATE DATABASE `techacademy`;というコマンドを実行することで、techacademyというデータベースを作成することができます。   Laravelの処理 Laravel側で実装する代表的な処理を抜粋して解説します。   tinkerでデータベース接続を確認する方法 コマンド php artisan tinker >>>DB::reconnect(); 解説 php artisan tinkerというコマンドを実行することでtinkerを利用します。 tinkerを利用しているREPLの状態は、行頭に>>>が表示されている状態です。 その状態で、DB::reconnect();を実行します。 無事データベースへの接続が完了していれば、次のような表示がされます。 => IlluminateDatabaseMySqlConnection {#683}   マイグレーションファイルの作成と実行 マイグレーションファイルとは、テーブルの作成・削除、カラムの追加・削除に関するデータベースのテーブル管理を行うファイルです。 コマンド php artisan make:migration create_techacademy_table --create=techacademies php
PHP

誰でも実装できる！PHPでメール送信を行う方法【初心者向け】現役エンジニアが解説

PHPでメールを送信する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 mail関数、mb_send_mail関数を使って簡単にメールを送信できます。 フォームに入力されたメールアドレスに簡単にメール送信できるので、ぜひ覚えておきましょう。   目次フォームオブジェクト(form)とはフォームオブジェクトのactionとはJavaScriptでフォームの送信先を設定する方法実際に書いてみよう筆者プロフィール   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！PHPでメールを送信することはできますか？ 田島悠介 ちょっと問題があるけど、関数を書くだけで送信できるんだ。 大石ゆかり そんなに簡単に送信できるんですか？ 田島悠介 そうなんだ。mail関数とmb_send_mail関数について見ていこう！   mail関数、mb_send_mail関数とは mailとmb_send_mailは、どちらもメールを送信する際に使用される関数です。 mailとmb_send_mailの違いとして、mb_send_mailは日本語などのマルチバイト文字を扱ってメールの送信を行うことができます。   メール送信の書き方 mailの場合 mailは以下のように記述します。 mail(送信先,タイトル,本文,追加ヘッダー,追加コマンドラインパラメータ) 送信先には、送信先のメールアドレスを指定します。 タイトルには、メールのタイトルを指定します。 本文には、メールの本文を指定します。 追加ヘッダーには、メールの追加ヘッダー情報を指定します。 追加ヘッダーとは、From、Cc、Bccなどの送信先情報です。 追加ヘッダーは省略可能です。 追加コマンドラインパラメータには、 追加のフラグをコマンドラインオプションとして、メール送信プログラムに渡す際に使用可能です。 追加コマンドラインパラメータは、省略可能です。   mb_send_mailの場合 mb_send_mailは以下のように記述します。 mb_send_mail(送信先,タイトル,本文,追加ヘッダー,追加コマンドラインパラメータ) 送信先には、送信先のメールアドレスを指定します。 タイトルには、メールのタイトルを指定します。 本文には、メールの本文を指定します。 追加ヘッダーには、メールの追加ヘッダー情報を指定します。 追加ヘッダーとは、From、Cc、Bccなどの送信先情報です。 追加ヘッダーは省略可能です。 追加コマンドラインパラメータには、 追加のフラグをコマンドラインオプションとして、メール送信プログラムに渡す際に使用可能です。 追加コマンドラインパラメータは、省略可能です。   日本語で送信する場合 mb_send_mailで日本語のメールを送る場合は、最初に以下の2行を挿入します。 mb_language("Japanese"); mb_internal_encoding("UTF-8"); mb_language(“Japanese”);と指定することで日本語指定が可能です。 mb_languageは言語を設定する関数です。 mb_internal_encoding(“UTF-8”);と指定することで、文字コードをUTF-8に指定します。 mb_internal_encodingでは文字のエンコードを指定します。     大石ゆかり mail関数とmb_send_mail関数は、それぞれ別ですか？ 田島悠介 mb_send_mail関数は、内部でmail関数を呼んでいるんだ。こういう形をラッパー関数っていうんだ。 大石ゆかり ラッパー関数？ 田島悠介 mail関数をラップするように包んで、何か機能を付け加えた物って考えるといいよ。   [PR] コーディングで副業する方法とは実際に書いてみよう 簡単な入力フォームを作成し、そこからメールを送信して結果を画面に表示させます。   mailform.htmlの作成 まず送信先、メールのタイトル、本文を入力するフォームを設置したmailform.htmlを作成します。 mailform.htmlサンプルコード <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" charset="UTF-8"></script> </head> <body> <p> <h2>メール送信フォーム</h2> </p> <form action="./confirm.php" method="post"> <p>
PHP

JavaScriptでformタグのaction値を操作する方法を現役エンジニアが解説【初心者向け】

JavaScriptでformタグのaction値を操作する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでformタグのaction値を操作する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 formタグとは action値とは formタグのaction値を取得・設定する方法 実際に書いてみよう まとめ   formタグとは formタグとは、入力フォームに使用するWebサーバーに情報を送信する範囲を指します。 情報を入力するinputタグなどと組み合わせて使用します。 例えば、以下のような記述で簡易なフォーム作成が可能です。 <form action="" method="get" name="form1"> <div> <label for="name">名前: </label> <input type="text" name="name" id="name" required> </div> <div> <label for="email">メールアドレス: </label> <input type="email" name="email" id="email" required> </div> <div> <input type="submit" value="送信"> </div> </form> methodに「get」を指定すると、urlの末尾に情報が付与されて送信されます。   [PR] コーディングで副業する方法とはaction値とは action値とは、入力されたデータに対して情報の送信先を表すものです。 何も指定しない場合は現在表示しているページを表します。 <form action="" method="get" name="form1">   formタグのaction値を取得・設定する方法 formタグのaction値を取得・設定するにはactionプロパティを使用しましょう。 以下はform1という名前のformタグのaction値を表しています。 document.form1.action action 値を設定するには以下のように記述します。 document.form1.action
JavaScript

HTMLでformを使って送信フォームを作成する方法【初心者向け】

最近HTMLを勉強し始めた方は、HTMLは文字や画像を表示するだけの言語と思っておられる方がいらっしゃるかもしれません。HTMLは文字や画像以外にも、簡単なフォームを作成する機能が備わっています。 今回は、HTMLを使用して、送信フォームを作成する方法について解説していきたいと思います。 HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   form要素の書き方 それではform要素について解説していきます。form要素は送信フォームを作成するために、必要な要素です。 基本的な書き方は以下の通りです。 <form action="" method=""> //フォームの内容を記入していく。 </form> 実際にはform要素だけでイメージしているような入力フォームが表示されるわけではなく、フォーム内にinput属性などの部品を配置していくことで、フォームを表示することができます。 form要素はあくまで部品をまとめるて指令を送るタグといったイメージでいてください。 これだけ見ていてもイメージがわかないと思うので実際に書いて覚えていきましょう。   action属性の書き方 action属性の役割は、フォーム送信後にどの場所にデータを送信するかを指定するものです。 指定方法の例 外部URLに指定する <form action="https://techacademy.jp"> この場合、https://techacademy.jpというURLに対して、フォームデータを送信する処理になります。   内部URLに指定する <form action="form.php"> この場合、現在のURLの最後にform.phpを追記した場所に対して、フォームデータを送信する処理になります。   指定しない <form> この場合、現在のURLに対して、フォームデータを送信する処理になります。   [PR] コーディングで副業する方法とはmethodタグの書き方 method属性の役割や、フォーム送信する際の送信方法を指定します。 送信方法として一般的なものはPOSTとGETがあります。 PHPでフォームからデータを受け取る方法を参考にしてみてください。   大石ゆかり フォームというのは何でしょうか？ 田島悠介 フォームで、データを送ることが出来るんだよ。お問い合わせフォームや会員登録のフォームとして使われているね。 大石ゆかり 見たことあります！あれは、フォームタグで作られていたんですねー。 田島悠介 そうそう。データの入力枠にはフォームの部品が必要なんだけど、今回はform要素の概要を見てみよう！   実際に書いてみよう それでは、実際にフォームを作成していきましょう。 メッセージを入力するフォーム部分と、送信するボタンを作成していきましょう。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="form.php" method="post"> <div> <label for="message">message:</label><br> <input type="text" />
HTML

HTMLでformタグのaction属性に複数の送信先を指定する方法を現役エンジニアが解説【初心者向け】

HTMLでformタグのaction属性に複数の送信先を指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 formタグのaction属性に複数の送信先を指定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   formタグのaction属性について formのaction属性はどこにデーターを送信するかを指定します。属性に何も指定しない場合は、そのフォームが置かれているページURLが送信されます。   複数の送信先を指定する方法 今回はJavaScriptを使って、複数の送信先を指定してみましょう。それぞれ送信先を指定したボタンを2つ用意し、クリックしたボタン先にデータを送信する方法をご紹介します。 HTML buttonタグのonclick属性に関数名multipleactionを指定します。その関数の引数に送信先を指定します。 <form> <button type="button" onclick="multipleaction('/a/')">ページAに送信</button> <button type="button" onclick="multipleaction('/b/')">ページBに送信</button> </form> Javascript クリックしたボタンの送信先を関数に渡して、action属性にその値を引き渡すというシンプルなscriptになります。 <script> function multipleaction(u){ var f = document.querySelector("form"); var a = f.setAttribute("action", u); document.querySelector("form").submit(); } </script>   [PR] コーディングで副業する方法とは複数の送信先に送ってみよう サンプルを用意しましたので、ご確認ください。送信先が分かりやすいようにYahoo! JapanとGoogleに変更しました。   See the Pen form action by This is standard (@koutafunahashi) on CodePen.   監修してくれたメンター 舟橋幸太郎 フリーのWebデザイナー、グロースハッカーです。 KaizenPlatform社主催のGrowth Hacker Awardsで受賞歴があります。過去行ったA/Bテストが実績として書籍に掲載されました。 TechAcademyではWebデザインコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでフォームの送信先を操作する方法を現役エンジニアが解説【初心者向け】