19

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>

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

編集：わかりました。ここでPHPまたはJavaScriptのいずれかが必要であることがわかりました。誰かが私のためのリファレンスとしてPHPまたはJsのサンプルコードを提案または提供できますか？

4

2 に答える 2

30

わかりました、これを突き刺します。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にデータが表示されます。たとえば、名前がBill Jonesで、35歳の場合、process.phpページは http://yoursite.com/process.php?Name=Bill+Jones&Age=35と表示されます。必要に応じて、手動で変更できます。このようにURLと出力はそれに応じて変更されます。

追加のJavaScriptの例

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

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

 <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>
于 2012-06-13T00:31:09.143 に答える
1

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>
于 2015-10-30T06:07:46.030 に答える