web-dev-qa-db-ja.com

HTMLフォームは、送信ボタンを押すと「アクション」を実行します

HTMLフォームについて学びたいです。たとえば、姓と名の2つの入力テキストフィールドと送信ボタンがあります。送信ボタンをクリックすると、Webページに次のように表示されます。あなたの名前は「名」、「姓」です。

<!DOCTYPE html>
<html>
   <body>
      <form>
         First name: <input type="text" name="firstname" /><br />
         Last name: <input type="text" name="lastname" /><br />
         <input type="submit" value="Submit" />
      </form> 
   </body>
</html>

ボタンをクリックしたときに「アクション」を得るには、ここで何が必要ですか？

編集： OkここでPHPまたはJavaScriptが必要です。誰かがサンプルコードを提案または提供できますか？ of PHPまたはJsが参考になりましたか？

htmlform-submit
17
Ronaldinho Learn Coding

わかりました、これで刺します。 PHPを使用したい場合は、マシンにPHPとWebサーバーの両方をインストールして構成する必要があります。この記事では、始めることができます。 PHPマニュアル：Windowsでのインストールシステム

環境をセットアップしたら、Webフォームでの作業を開始できます。記事から直接： PHPによるフォームデータの処理 ：

この例では、2つのページを作成する必要があります。最初のページでは、いくつかのデータを収集するための簡単なHTMLフォームを作成します。以下に例を示します。

_<html>   
<head>
 <title>Test Page</title>
</head>   
<body>   
    <h2>Data Collection</h2><p>
    <form action="process.php" method="post">  
        <table>
            <tr>
                <td>Name:</td>
                <td><input type="text" name="Name"/></td>
            </tr>   
            <tr>
                <td>Age:</td>
                <td><input type="text" name="Age"/></td>
            </tr>   
            <tr>
                <td colspan="2" align="center">
                <input type="submit"/>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
_

このページは、名前と年齢のデータをページprocess.phpに送信します。次に、作成したHTMLフォームのデータを使用するprocess.phpを作成します。

_<?php   
    print "Your name is ". $Name;   
    print "<br />";   
    print "You are ". $Age . " years old";   
    print "<br />";   $old = 25 + $Age;
    print "In 25 years you will be " . $old . " years old";   
?>
_

ご存知のように、フォームのmethod = "post"部分を省略すると、URLにデータが表示されます。たとえば、あなたの名前がビル・ジョーンズで、あなたが35歳の場合、process.phpページは http://yoursite.com/process.php?Name=Bill+Jones&Age=35 Ifとして表示されます必要に応じて、この方法でURLを手動で変更すると、それに応じて出力が変更されます。

追加のJavaScriptの例

この単一ファイルの例では、質問からhtmlを取得し、フォームのonSubmitイベントを2つのテキストボックスの値を取得してアラートボックスに表示するJavaScript関数に結び付けます。

注：document.getElementById("fname").valueは、IDに等しいfnameタグを持つオブジェクトを取得してからプルしますそれはvalueです。この場合、これは[名]テキストボックスのテキストです。

_ <html>
    <head>
     <script type="text/javascript">
     function ExampleJS(){
        var jFirst = document.getElementById("fname").value;
        var jLast = document.getElementById("lname").value;
        alert("Your name is: " + jFirst + " " + jLast);
     }
     </script>

    </head>
    <body>
        <FORM NAME="myform" onSubmit="JavaScript:ExampleJS()">

             First name: <input type="text" id="fname" name="firstname" /><br />
             Last name:  <input type="text" id="lname" name="lastname" /><br />
            <input name="Submit"  type="submit" value="Update" />
        </FORM>
    </body>
</html>
_
25
xelco52

index.html

<!DOCTYPE html>
<html>
   <body>
       <form action="submit.php" method="POST">
         First name: <input type="text" name="firstname" /><br /><br />
         Last name: <input type="text" name="lastname" /><br />
         <input type="submit" value="Submit" />
      </form> 
   </body>
</html>

その後、送信ボタンを押した後に表示するページをもう1つ指定します

submit.php

<html>
  <body>

    Your First Name is -  <?php echo $_POST["firstname"]; ?><br>
    Your Last Name is -   <?php echo $_POST["lastname"]; ?>

  </body>
</html>
1
Amaresh Tiwari