TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでフォームに送信ボタンを作る方法を現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLでフォームに送信ボタンを作る方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLでフォームに送信ボタンを作る方法について解説しています。送信ボタンを生成するときは、inputタグのtype属性でsubmitの値を指定します。フォーム作成の基本となる要素なので必ず覚えておきましょう。

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

ここでは、HTMLの入力フォームに必要な送信ボタンの設置方法について解説していきます。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

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

大石ゆかり

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

田島悠介

フォームに送信ボタンを作る方法について詳しく説明していくね！

大石ゆかり

詳しく知りたいです。よろしくお願いします！

 

送信ボタンの役割

お問い合わせやアンケートフォームには、入力エリアや選択ボタンなどがあります。送信ボタンには、ユーザーによって入力または選択された値を送信する役割があります。

メールを書いて送信ボタンをクリックするのと同様に、HTMLのフォームでは入力後に「送信ボタン」をクリックすることで情報を送信することが可能です。

例：TECHACADEMYの無料体験申し込みフォーム

送信ボタンは、「送信」という表記があるとは限りません。上記のように「勉強を始める」や「〇〇へ申し込む」など、よりユーザーに伝わりやすい表現で表記することもあります。

 

submit属性値について

submit属性値はhtmlページに対して送信ボタンの役割をもったボタンを作成するたの属性値です。具体的には、<input>タグのtype属性をsubmitにすることで、送信の役割を持ったボタンを作成することができます。

以下、実際に送信ボタンを作るためのコードとなります。

HTML：

<input type="submit">

この場合は下記のように、「送信」ボタンが表示されます。

 

先ほどの無料体験申し込みフォームのようにボタンのテキストを「送信」以外のものに変えたい場合は、value属性を使用します。

HTML：

<input type="submit" value="勉強を始める">

 

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

入力フォームに送信ボタンを作ってみよう

無料体験申し込みフォームを例にHTMLを書いてみます。

HTML：

<html>
  <head>
    <meta charset="utf-8">
    <title>ラジオボタン</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <form>
      氏　名：<input type="text" name="苗字"> <input type="text" name="名前"><br>
      氏　名(カナ)：<input type="text" name="ミョウジ"> <input type="text" name="ナマエ"><br>
      メールアドレス：<input type="email" name="メール"><br>
      <input type="submit" value="勉強を始める">
    </form>
  </body>
</html>

 

送信ボタンがクリックされると、<input>タグのname属性の値と、入力した値がセットになって、送信されます。

作成したフォームに上記のように入力して、送信ボタンをクリックした場合、下記のような情報を送信することができます。

送信される情報の例：
[name属性の値=入力された値]
苗字＝煌木
名前＝太郎
ミョウジ＝キラメキ
ナマエ＝タロウ
メール＝kirameki＠techacademy.jp

こうして、フォームを設置することで、申し込んできたユーザーの名前やメールアドレスなどの情報を取得することができます。また、デフォルトの送信ボタンでは、クリックできるエリアが小さく操作性がよくありません。CSSでわかりやすく、クリックしやすいデザインに設定すると良いでしょう。

submitをCSSでおしゃれに設定する方法を現役エンジニアが解説を参考に送信ボタンをカスタマイズしてみてください。

 

監修してくれたメンター

メンター 橋本真理

フリーのweb/グラフィックデザイナー

会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動、TechAcademyではWebデザインコース・WordPressコースを担当しています。

ラジオとバナナが好き。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

HTMLで上付き下付き文字を使って数式や化学式を書く方法を現役デザイナーが解説【初心者向け】

HTMLで上付き下付き文字を使って数式や化学式を書く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

HTMLで画像の下に文字を入れる方法を現役エンジニアが解説【初心者向け】

HTMLで画像の下に文字を入れる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
HTML

HTMLでページを再描画する方法を現役エンジニアが解説【初心者向け】

HTMLでページを再描画する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、H...
HTML

HTMLでword-wrapプロパティで単語を改行する方法を現役デザイナーが解説【初心者向け】

HTMLでword-wrapプロパティで単語を改行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説し...
HTML

まずはここから！HTMLの書き方【初心者向け】現役デザイナーが解説

本記事では、HTMLの具体的な書き方について、初心者向けに現役エンジニアが解説していきます。 本記事はテックアカデミーのはじめての副業コースのHTMLカリ...
HTML

HTMLのtd要素、th要素とrowspan属性の使い方を現役デザイナーが解説【初心者向け】

HTMLのtd要素、th要素とrowspan属性の使い方について解説します。 そもそも、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

HTMLでラジオボタンとチェックボックスを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、ラジオボタンとチェックボックスを表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ラジオボタンとチェックボックスを表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   入力フォームの選択ボタン 入力フォームでよく見かける選択ボタンに、ラジオボタンとチェックボックスがあります。どちらも<input>タグにtype属性を指定することで簡単につくることができます。 <input>タグについては HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法 をご覧ください。 ラジオボタン、チェックボックスは以下のタグで表示することが可能です。 ・ラジオボタン  <input type=”radio”> 選択肢のなかから、ひとつだけを選択するボタン （※同一name属性内で、一項目しか選択できない） ・チェックボックス  <input type=”checkbox”> 選択肢のなかから、複数選択ができるボタン （※同一name属性はひとまとまりのデータとして扱われる） ・value属性 選択項目をデータとして送信する際に、データの受けとり手に値を知らせます。 ・name属性 要素（ここでは<input type=”●●”>）に名前をつけて、なんの要素（選択ボタン）であるかを指定します。   大石ゆかり typeを使うと他にもいろいろ設定できるんですかー？ 田島悠介 他にも送信ボタンであったり、文字を入力できるフォームも簡単に作れるんだよ！ 大石ゆかり へぇ〜じゃあアンケートページとかでよく使われてそうですね！   それでは具体的な実装方法をみていきましょう。   ラジオボタン ラジオボタンという名前は、昔の自動車に搭載されていたカーラジオが、ひとつの局のボタンを押すと、他の局のボタンが選択できない仕様だったことから来ているそうです。 ラジオボタンは選択肢のなかから、ひとつだけを選択する入力ツールになります。   <input type=”radio”>にname属性を”gender”、valueを”male”と”female”に設定して性別選択ボタンをつくりましょう。タグの終わりには、実際にブラウザで表示される項目名(男性・女性)を書きます。選択肢の値(value)が”male”と”female”の、”gender”という名前(name)がついたラジオボタン（<input type=”radio”>）です。 <input type="radio" name="gender" value="male">男性 <input type="radio" name="gender" value="female">女性   これでどちらか一方を選択できるボタンができました。   上記のHTMLをコピー&ペーストして、もうひとつラジオボタンをつくってみましょう。ここでは、Webページの訪問者からサイトを知った経緯を知りたいと仮定して、選択肢の値(value)にサイトを知るきっかけとなった項目を設定し、”trigger”という名前のついたラジオボタンをつくります。 <input type="radio" name="trigger" value="facebook">facebook <input type="radio" name="trigger" value="twitter">twitter <input type="radio" name="trigger" value="hatebu">はてなマーク <input type="radio" name="trigger" value="syoukai">知人からの紹介   今度は、”gender”と”trigger”の2つの選択ツールができました。 このとき、name属性を”trigger”に書き換え忘れて”gender”のままにしておくと、”gender”と名付けられたすべての項目「男性、女性、facebook、twitter、はてなブックマーク、知人からの紹介」から、どれか一つの項目を選択することになってしまいます。 複数の選択群をつくる際には、必ずカテゴリーごとにしっかりとname属性を分けるように注意しましょう。   [PR] Webデザインで副業する方法とはdisabled属性 disabled属性は、フォーム部品を無効化することができます。 この属性で指定することで、フォーム部品の選択や書き換えを行うことができます。 用途の目的としては、同じフォーム流用するが、ユーザーの選択肢によってdisabeld属性を使用し一部の選択肢の書き換えを禁止する時に使用します。 disabled属性の実例 <!DOCTYPE html> <html> <head><meta charset="UTF-8"></head> <body> <!-- 性別選択 --> <input type="radio" name="gender" value="male" disabled/>男性 <input type="radio" name="gender" value="male"/>女性
HTML

JavaScriptでボタンを設置させる方法【初心者向け】

JavaScriptでボタンを設置させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 クリックできるボタンは、一般的なサイトでもよく見ると思いますので、覚えておきましょう。 目次送信ボタンの役割submit属性値について入力フォームに送信ボタンを作ってみよう監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   大石ゆかり ボタンってマウスでクリックするとへこんだりする要素のことですよね？ 田島悠介 そうそう。でも、ボタン特有のものがあるよね。 大石ゆかり ボタンを押したら、プログラミングの何かの処理が動作するような感じですか？ 田島悠介 その通り！ボタンってけっこう重要なんだよね。ボタンを表示させる方法を見てみよう！   HTMLでボタンを表示させる方法 はじめに、HTMLだけでボタンを表示させる方法について解説します。 まずはテキストで通常通りに書いていきます。 <img src=”images/ducks.jpg” alt=”あひる”> <p>あひる5個セット</p> <p>800円</p> <p>購入する</p>   ここから「購入する」ボタンを作成していきます。   ボタンにするには、以下のように記述するだけです。 <input type=”submit” value=”購入する”>   ここで「購入する」の文字を変えれば、その文字を使ったボタンになります。   適用すると以下の通りです。 <img src=”images/ducks.jpg” alt=”あひる”> <p>あひる5個セット</p> <p>800円</p> <input type=”submit” value=”購入する” > 簡単にできましたね。 設置したボタンをクリックすると、ポップアップウィンドウが表示される表現を加えることもできるのであわせて試してもよいでしょう。   大石ゆかり input要素のtypeをsubmitにすればいいんですね。valueの値がボタンに表示される文字列になるんですよね？ 田島悠介 そうそう。その他にも、buttonタグを使う方法があるんだ。buttonタグのtypeをsubmitにすればOK。後は、buttonタグを閉じて、間にボタンに表示させたい文字列を書くんだ。 大石ゆかり フォームのボタンを作るのにも種類があるんですねー。 田島悠介 そうだね。ここからbuttonタグの使い方を詳しく見ていこう。   <button>タグの使い方 HTMLの<button>タグは、HTMLタグの1つです。 フォームの「送信」や「リセット」などの処理を行うボタンを作成するために使います。 <button>タグを使用すると、自動的にボタンの見た目に装飾されたり、検索エンジンに「これはボタンです」と伝えられます。   <button>タグの3つのtype属性 <button>タグには、以下の3種類のtype属性が用意されています。 1.type=”submit” 2.type=”reset” 3.type=”button” ※初期値はtype=”submit”です。 これら3つの役割と利用例を解説します。   submit:送信ボタン <button type="submit">送信</button> 送信 type=”submit”と指定すると、送信ボタンとして機能します。 例えば、HTMLの<form>タグを使い「フォームに入力した内容（名前、メールアドレスなど）を送信する」時に使用されます。 <form>タグの使い方は、HTMLでformを使って送信フォームを作成する方法の記事で詳しく解説しているので、こちらもあわせてチェックしてみてください。   reset:リセットボタン <button type="reset">入力を取り消す</button> 入力を取り消す type=”reset”と指定すると、リセットボタンとして機能します。 例えば、フォームに入力した内容を一括で取り消したい場合などに使用されます。   button:押しボタン(初期値では特に何も起こらない) <button type="button">クリック</button> クリック type=”button”と指定すると、デフォルトでは特にクリックしても何も起こりません。 初期設定ではただの「無反応のボタン」ですが、JavaScriptと組み合わせることで汎用性のあるボタンを作れます。 例えば、「ユーザーがボタンをクリックすると、ポップアップ表示を行う」などのギミックを仕掛けられます。 「フォームの送信・リセット」以外の目的の場合は、type=”button”を活用しましょう。   [PR] Webデザインで副業する方法とは実際に書いてみよう では、実際にコードを書いていきましょう。 HTMLの<button>タグとJavaScriptを組み合わせたボタンを作成します。 今回は「5文字以上のテキストが入力されると、送信ボタンが活性化する」といったボタンを作成してみます。   disabled属性:クリックしても機能しないボタン 事前準備として、送信ボタンにdisabled属性を付与します。 <button type=”submit” id=”button” disabled>送信</button> disabled属性を<button>タグに指定すると、ボタンを無効化できます。   以下はコード例です。 ご自分のPCでも実際に試してみましょう。 HTML <form id="form" action="#"> <input type="text" id="input-text" placeholder="5文字以上入力してください"> <button type="submit" id="button" disabled>送信</button> </form> JavaScript <script> const inputText = document.getElementById('input-text'); const button = document.getElementById('button'); inputText.addEventListener('keyup', (e) => {
JavaScript

submitをCSSでおしゃれに設定する方法を現役エンジニアが解説【初心者向け】

submitをCSSでおしゃれに設定する方法について解説します。 そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 submitをCSSでおしゃれに設定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   submitとは 入力フォームの「送信」や「投稿」を行うボタンのことです。   基本的なsubmitのコード <form> <p><input type="text"></p> <p><input type="submit" value="送信する"></p> </form>   See the Pen justify-content: center; by 17num (@17num) on CodePen.   [PR] Webデザインで副業する方法とはおしゃれなsubmitボタンを設定してみる submitボタンの装飾例をいくつかご紹介します。   例1：角を丸くしてみる ボタンの角を丸くするには、border-radiusを設定します。   HTML <form> <p><input type="text"></p> <p><input class="radius-percent-0" type="submit" value="送信する"></p> <p><input class="radius-percent-10" type="submit" value="送信する"></p> <p><input class="radius-percent-20" type="submit" value="送信する"></p> <p><input class="radius-percent-30" type="submit" value="送信する"></p> <p><input type="text"></p> <p><input class="radius-pixel-0" type="submit" value="送信する"></p> <p><input class="radius-pixel-10" type="submit" value="送信する"></p> <p><input
CSS

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

PHPでメールを送信する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 mail関数、mb_send_mail関数を使って簡単にメールを送信できます。 フォームに入力されたメールアドレスに簡単にメール送信できるので、ぜひ覚えておきましょう。   目次送信ボタンの役割submit属性値について入力フォームに送信ボタンを作ってみよう監修してくれたメンター   そもそも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

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

今回は、PHPでクリックされたボタンに応じて別の処理を実行する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPでクリックされたボタンに応じて別の処理を実装することで、ユーザーが押したボタンの種類によって、処理を変えることが可能です。 実務でも、ユーザーの操作に応じて、処理を変更しながら表示するため、ぜひ学習してみてください。   目次送信ボタンの役割submit属性値について入力フォームに送信ボタンを作ってみよう監修してくれたメンター   そもそも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

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでフォームに送信ボタンを作る方法を現役デザイナーが解説【初心者向け】