HTML

HTMLのフォームからPOSTで送信されたデータの受け取り方を現役エンジニアが解説【初心者向け】

初心者向けにHTMLのフォームからPOSTで送信されたデータの受け取り方について解説しています。入力されたデータをPHPで送信する際にはPOSTとGETの2つのメソッドが使用されます。それぞれの違いとPOSTの場合の書き方を覚えましょう。

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

監修してくれたメンター

ノマリカ

印刷会社で校閲とDTPオペレーションを5年、Web制作会社でデザイナーを8年、一般企業でWeb担当を1年経験した後、フリーランスのデザイナーとして独立。
伝わりやすくて明快なデザインを得意としている。

HTMLのフォームからPOSTで送信されたデータの受け取り方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

POSTとは

「POST」とは、ブラウザからWebサーバにデータを送信するための「HTTPリクエスト」と呼ばれる通信形式の1つです。

お問い合わせフォームなどに入力された内容をWebサーバに送信する時に使用される形式です。

「POST」とよく比較される形式に「GET」という送信形式もあります。

POSTとGETの違い

HTTPリクエストの通信形式「POST」と「GET」の違いについて以下に示します。

GET

「GET」は、URL末尾にリクエストパラメータと呼ばれる識別子が追加される形で送信されます。

そのため、送信時のURLからどのような内容が送られているのかが目視で確認できます。

断片的な情報を送る場合には適しているといえるでしょう。

POST

「POST」は、データ内に含まれた形で送信されます。

そのため送信時のURLには表示されず、ユーザーからは目視で確認できない仕組みです。

文字数の制限が「GET」よりも緩いので、機密性のある長文を送る場合に適しています。

以上の違いから、重要な情報や機密性のある長文を送る際には、「GET」ではなく「POST」を利用するのが一般的です。

しかしながら、「POST」であっても標準的に暗号化されているデータの形式にはならず、開発者向けのツールを使用すると内容は確認できるため、実際の運用時にはセキュリティ対策が別途必要といえるでしょう。

[PR] Webデザインで副業する方法とは

POSTで送信されたデータの受け取り方

お問い合わせフォームなどから送信されたデータは、Webサーバに設置してある、PHPプログラムファイルなどにより受け取られ処理されます。

以下に、POST形式で送信する際の簡単な記述例を示します。

HTML

<form action="sample.php" method="post">
  <input type="textarea" name="confirm" value="">
  <input type="submit" value="送信">
</form>

PHP（sample.php）

<?php echo $_POST["confirm"]; ?>

画面イメージ

以下に、実行結果の画面イメージを示します。

ブラウザにはHTMLに記述した入力フォームが表示されています。

こちらに『SAMPLE』というテキストを入力し、送信してみます。

Webサーバ側のPHPファイルが表示され、送信したテキスト『SAMPLE』が結果として出力されました。

まとめ

今回は、HTMLのフォームからPOSTで送信されたデータの受け取り方について、基本的な知識やコードを紹介しました。

「POST」は「GET」とは異なり、送信内容を通信データ内に含めた形で送信するためURLに表示されず、ユーザーからは目視で確認できない仕組みです。

一般的なお問い合わせフォームに入力された内容を送信する際には、POST形式を利用するようにしましょう。

また、プログラミング初心者向けに、より発展的な内容で「PHPでフォームからデータを受け取る方法」も解説しています。

ご興味のある方はぜひご覧ください。

HTMLのフォームからPOSTで送信されたデータの受け取り方がよく分かったので良かったです！

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

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

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

つまずかず「効率的に」学びたい
副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

HTMLとCSSでランキングリストをデザインする方法を現役エンジニアが解説【初心者向け】

HTMLとCSSでランキングリストをデザインする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...

HTML

入門から応用まで！ホームページの作り方が分かるおすすめの本10選

今回はホームページ作成におすすめの本をまとめてみました。初心者向けを2冊、中級者向けを3冊、上級者向けを5冊紹介していきます。ぜひ自分のレベルに合った本...

Webデザイン

HTMLで蛍光ペンのようなマーカーを作成する方法を現役デザイナーが解説【初心者向け】

HTMLで蛍光ペンのようなマーカーを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLをブラウザで表示するXAMPPの使い方を現役エンジニアが解説【初心者向け】

HTMLをブラウザで表示するXAMPPの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

【Webデザインに必須！】無料で使えるかっこいいフォントまとめ！

かっこいい・クール系フォントの中から、無料で商用利用も可能なものをまとめました。フォント一つでサイトの印象もガラリと変わるので、皆さんもぜひ使ってみてく...

Webデザイン

HTMLでリストを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLでリストを使う方法について解説します。 ...

HTML

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

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] Webデザインで副業する方法とは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

JavaScriptでPOST送信する方法を現役エンジニアが解説【初心者向け】

JavaScriptでPOST送信する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptでPOST送信することで、Webページのデータをサーバに送信できます。実務でもサーバとデータ連携することが多いので、ぜひ学習してみてくださいね。目次POSTとはPOSTとGETの違いPOSTで送信されたデータの受け取り方まとめHTMLを学習中の方へそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでPOST送信する方法について詳しく説明していくね！大石ゆかりお願いします！ POSTとは POSTとは、通信規格であるHTTP通信内で、Webページの中でサーバ(Webサーバ)とクライアント(ブラウザなど)とのやりとりに利用する1つの機能です。ブラウザの表示方法として、GETという機能を使ってブラウザが「このURLのページを送って！」とリクエストを出し、Webサーバが指定されたURLのページをクライアントに送信し、ブラウザ上で目的のページが表示されます。 GETは主にサーバへWebページなどのデータをリクエストする際に利用するものであり、POSTは逆にデータを送信する際に使います。 POSTは、Webの掲示板などで文章を投稿する際などに利用されています。 JavaScriptでPOST送信する方法 POST送信を行うには、HTMLのフォームを利用するなど様々な方法があるものの、JavaScriptでPOST送信したい場合もあります。例えば、Webアプリケーションの中には、ボタンを押した際に画面の遷移は行わないけど、画面の一部を書き換えたい場合などは、JavaScriptを使ってPOST送信をすることが可能です。今回は簡単な数値計算アプリケーションを使って、JavaScriptによるPOST送信の方法を見ていきましょう。今回作成する数値計算アプリケーションでは、入力欄が3つあり、1つ目と2つ目に数値を入れましょう。計算ボタンを押すと、3つ目の入力欄に2つの値を足した計算結果が表示されます。画面は以下の通りです。 [PR] Webデザインで副業する方法とは実際に書いてみようそれでは実際に、JavaScriptでPOST送信する方法を実装してみます。送信されたデータはサーバ側でPHPのプログラムにより処理されます。数値計算アプリケーションの例今回作成した数値計算アプリケーションのソースコードは、HTMLファイルとJavaScriptファイル、サーバ側のPHPファイルです。サーバ側PHPサンプルコード <?php $arg1 = $_POST['arg1']; $arg2 = $_POST['arg2']; $answer = $arg1 + $arg2; echo $answer; HTMLサンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>計算機アプリ</title> <script src="script.js"></script> </head> <body> <input id="arg1" type="number"> + <input id="arg2" type="number"> = <input id="answer" type="number"> <br/> <button id="calc_button">計算</button> </body> </html> JavaScriptサンプルコード window.onload = function() { // 計算ボタンを押した際の動作を設定 document.getElementById('calc_button').onclick = function()

JavaScript

jQueryのAjaxでPOST送信してPHPで受け取る方法【初心者向け】現役エンジニアが解説

今回は、jQueryのAjaxでPOST送信してPHPで受け取る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。田島悠介今回は、PHPに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 jQueryのAjaxでPOST送信してPHPで受け取る方法について詳しく説明していくね！大石ゆかりお願いします！目次 Ajaxとは AjaxでPOST送信する jQuery（送信側）の記述方法 PHP（受信側）の記述方法まとめ Ajaxとは AjaxとはHTTPプロトコル通信で、HTMLやPHPファイルからリクエスト送信をHTTPサーバに送信して、レスポンスをブラウザ側で受信する動作を非同期通信で受け取ることができる技術です。 Ajaxを使うとHTMLファイルの中の一部だけ表示更新するなどの操作を行うことができます。例えば、ブラウザ上に表示した一覧表の内容を更新して、データベースに登録した内容をまた一覧表に反映させる時、HTMLファイルの表部分の表示だけ更新する、ということができるようになります。 [PR] Webデザインで副業する方法とはAjaxでPOST送信する Ajaxを使ってPOST送信するには、jQuery側でPOST送信するデータの定義を記述して、PHP側で受け取り側の記述をします。（POST送信とはブラウザの入力フォームなどの内容をサーバ（PHP）に送る送信方法の一つです。）表示結果 index.htmlのコード <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <title>jQueryのAjaxでPOST送信してPHPで受け取る方法を現役エンジニアが解説</title> </head> <body> <p>IDを入力 : <input type="text" id="main" /><button id="send">送信</button></p> <div id="return"></div> <script src="./main.js"></script> </body> </html> 解説 1行目の<!DOCTYPE html>では、HTML5で作成することを宣言しています。 2行目の<html>では、HTML文書の実装を開始することを意味しています。 3行目の<head>では、head要素の開始を意味しています。 4行目の<meta charset=”UTF-8″>では、UTF-8という文字コードで実装することを意味しています。 5行目の<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>では、jQueryのコードを読み込んでいます。今回、Googleが用意したCDNを利用しています。 jQueryファウンデーションが用意しているCDNの方が、最新バージョンをいち早く確実に利用することができるメリットがありますが、CDNによってはサーバが一時的に停止していることがあるので、GoogleのCDNを利用するようにしています。 6行目の<title>jQueryのAjaxでPOST送信してPHPで受け取る方法を現役エンジニアが解説</title>では、検索結果やブラウザのタブに表示されるタイトルを指定しています。 7行目の</head>ではhead要素が終了することを意味しています。 8行目の<body>では、body要素が開始することを意味しています。 9行目の<p>IDを入力 : <input type=”text” id=”main” /><button id=”send”>送信</button></p>では、IDを入力するための入力フォームを用意しています。 id=”main”とid=”send”は、それぞれJavaScriptが実装されたmain.jsで利用されるため、要素名を覚えておいていただくと理解しやすいです。 10行目の<div id=”return”></div>も、main.jsで利用される要素です。最終的にこの位置に、main.jsで用意されたHTMLが追加表示されます。 11行目の<script src=”./main.js”></script>では、JavaScriptのコードを用意しているファイルを読み込んでいます。必ず5行目にあるように、jQueryファイルを先に読み込んで、そのあとJavaScriptファイルを読み込んでいただくとスムーズです。 12行目の</body>では、body要素が終了することを意味しています。 13行目の</html>では、HTML文章が終了することを意味しています。 jQuery（送信側）の記述方法 jQuery ではPHPにPOSTするデータの定義と、送信結果を受け取ったあとのアクションを記述します。記述の仕方は$.ajaxで記述する場合と、$.postメソッドを使用して記述する場合の2通りで紹介します。 $.ajaxで記述する方法 $.ajaxを利用して実装するコードを見ていきましょう。サンプルコード（main.js） $(function(){ $("#send").on("click", function(event){ let id = $("#main").val();

PHP

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

PHPでメールを送信する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 mail関数、mb_send_mail関数を使って簡単にメールを送信できます。フォームに入力されたメールアドレスに簡単にメール送信できるので、ぜひ覚えておきましょう。目次POSTとはPOSTとGETの違いPOSTで送信されたデータの受け取り方まとめHTMLを学習中の方へそもそも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] Webデザインで副業する方法とは実際に書いてみよう簡単な入力フォームを作成し、そこからメールを送信して結果を画面に表示させます。 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

作成してみよう！LaravelでAPIを扱う方法【初心者向け】

LaravelでAPIを扱う方法について解説します。 CRUD操作のAPIを実際に作成しているので、書き方を覚えておきましょう。そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。田島悠介今回は、Laravelに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Laravelでapiを使う方法について詳しく説明していくね！大石ゆかりお願いします！ APIとは API（Application Programming Interface）は、アプリケーション同士を協調して動作させるための仕様です。アプリケーションはAPIを提供することで、他のアプリケーションとやりとりすることができます。例えば、Twitter、Facebookなど様々な事業者は自社のサービスを外部のアプリケーション向けに提供するために、Web APIを公開しています。外部のアプリケーションはそれらのWeb APIを通してサービスを利用できます。私たちがWebページを参照する場合、WebブラウザがHTTPのURLにリクエストし、レスポンスとして返されるHTMLを描画します。それと同様にWeb APIの場合も、アプリケーションがHTTPのURLにリクエストし、レスポンスとして返されるデータを処理します。 Web APIでは、HTTP経由でJSON形式のメッセージを送受信するのが一般的です。JSON（JavaScript Object Notation）は、JavaScriptの記法をベースにオブジェクトを表記する方法で、様々なプログラミング言語で使われる汎用的な形式です。 APIの作成方法(crudなど) 基本的なCRUD（Create, Read, Update, Delete）の操作について、一番簡単な作成方法を説明します。以下のような手順で作成します。データベースマイグレーションを実施する。モデルを実装する。リソースコントローラを実装する。 APIリソースルートを追加する。マイグレーション、モデルはWebページと共用できます。コントローラ、ルートはAPI用の実装になり、Webページ用とは以下の点で異なります。リソースコントローラでは、フォームを表示するアクション（create, edit）が不要。各アクション（index, show, update, destroy）はJSON形式の文字列を返す。ビューの実装が不要。 routes/api.phpファイルにルートを追加する。実際のアプリケーションでは、認証やバリデーション等の実装も必要になりますが、今回は説明しません。また、APIリソースを使って作成する方法についても、今回は説明しません。 [PR] Webデザインで副業する方法とは実際に書いてみよう例として、Post（投稿）というリソースに対するCRUD操作のAPIを書いてみましょう。ターミナルでLaravelのartisanコマンドを実行して、マイグレーション、モデル、リソースコントローラの雛形を一気に生成します。 $ php artisan make:model -m -c -r Post 生成されたマイグレーションで、テーブルに必要なカラム（title, contentなど）を定義しておきます。 $table->string('title'); $table->text('content'); ターミナルでLaravelのartisanコマンドを実行して、マイグレーションを適用します。 $ php artisan migrate モデルで、$fillableプロパティを定義しておきます。複数代入の脆弱性を排除するためです。 // 複数代入可能な属性を指定 protected $fillable = ['title', 'content']; リソースコントローラの各アクションの中身を実装します。アクションからEloquentオブジェクトやコレクションなどを返すとJSONに変換されます。 create、editは不要なので削除します。 public function index() { // 投稿を作成日時の新しい順でペジネーションした結果を返す return Post::latest()->paginate(); } public function store(Request $request) { // リクエストパラメータから取得した値をもとにPostを作成する

PHP

PHPでクリックされたボタンに応じて別の処理を実行する方法を現役エンジニアが解説【初心者向け】

今回は、PHPでクリックされたボタンに応じて別の処理を実行する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPでクリックされたボタンに応じて別の処理を実装することで、ユーザーが押したボタンの種類によって、処理を変えることが可能です。実務でも、ユーザーの操作に応じて、処理を変更しながら表示するため、ぜひ学習してみてください。目次POSTとはPOSTとGETの違いPOSTで送信されたデータの受け取り方まとめHTMLを学習中の方へそもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。田島悠介今回は、PHPに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 PHPでクリックされたボタンに応じて、別の処理を実行する方法について詳しく説明していくね！大石ゆかりお願いします！ buttonとは Webサイトなどでよく見かけるボタンを作成するためには、HTMLの<button>タグを使用します。 <button>タグは、type属性を指定することで主に3種類の利用方法があります。 type=”submit” type=”reset” type=”button” type=”submit” クリックするとデータを送信します。 type=”reset” クリックするとフォームの内容などをリセットします。 type=”button” プログラムと組み合わせて様々な処理に利用します。実際に書いてみよう！CSSでボタンを作る方法も参考にしてみてください。クリックされたボタンに応じて別の処理を実行する方法ここでは、クリックされたボタンに応じて別の処理を実行する方法を解説します。 PHPサンプルコード <?php $result = ""; if (isset($_POST['add'])) { $result = "登録しました"; } echo $result; ?> HTMLサンプルコード <form action="index.php" method="post"> <button type="submit" name="add">登録</button> </form> 解説 PHP側のコードから解説します。 <?phpでは、PHPプログラムが開始することを意味します。 $result = “”;では、変数$resultに空文字を代入して初期化しています。初期化することで、以前利用していた$resultの中に入っている別の値を再利用しないように、値を空にしておきます。 if (isset($_POST[‘add’])) {では、if文を利用した条件分岐で、「もし、登録ボタンを押された時」という条件を指定しています。 isset()関数は、()内に指定した値が入っている場合にtrueを返します。 ()内に、$_POST[‘add’]が指定されていることでHTML側でaddというname属性のボタンが押された場合、if文の処理も実行されます。 $result = “登録しました”;では、「もし、登録ボタンを押された時」変数$resultに「登録しました」を代入しています。 }では、if文を終了しています。 echo $result;では、変数$resultを表示しています。 ?>では、PHPを終了しています。 HTML側では次のような処理を行っています。 <form action=”index.php” method=”post”>では、index.phpというPHPファイルに、フォームを送信した際の内容をPOSTという形式で送信することを意味します。 <button type=”submit” name=”add”>登録</button>では、登録ボタンを用意して、クリックしたらsubmit属性を用いて送信します。送信する際に、PHP側と連携するため、name属性でaddという属性値を指定しています。 </form>ではフォームの実装を終了します。 [PR] Webデザインで副業する方法とは実際に書いてみようそれでは、実際に<button>タグにname属性を設定し、PHPスクリプトでコントロールする例を見ていきましょう。サンプルコードindex.php <?php

PHP

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLのフォームからPOSTで送信されたデータの受け取り方を現役エンジニアが解説【初心者向け】

監修してくれたメンター

ノマリカ

目次

POSTとは

POSTとGETの違い

GET

POST

POSTで送信されたデータの受け取り方