HTML表單在點擊提交按鈕時做一些「動作」

我想了解HTML表單。例如，我有2個名字和姓氏的輸入文本字段和一個提交按鈕。點擊提交按鈕後，我希望網頁顯示如下內容：您的姓名是「名字」「姓」。HTML表單在點擊提交按鈕時做一些「動作」

<!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的示例代碼作爲參考嗎？

來源

2012-06-12 Ronaldinho Learn Coding

你''

好的，謝謝我會研究它。 –

好吧，我會採取刺。如果你想使用PHP，你需要在你的機器上安裝和配置PHP和一個web服務器。這篇文章可能讓你開始：PHP Manual: Installation on Windows systems

一旦你有你的環境設置，你可以開始使用webforms。直接從文章：Processing form data with PHP：

對於此示例，您將需要創建兩個頁面。在第一頁我們將創建一個簡單的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。現在，讓我們創建process.php從我們所做的HTML表單使用數據：

<?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"; 
?>

正如你可能知道，如果你離開了法=「郵報」形式的一部分，的URL顯示數據。例如，如果您的名字是Bill Jones，並且您的年齡爲35歲，我們的process.php頁面將顯示爲 http://yoursite.com/process.php?Name=Bill+Jones&Age=35如果需要，您可以手動更改此URL的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>

來源

2012-06-13 00:31:09 xelco52

嗨！謝謝！非常好的解釋！我準備好了在線主機和網絡服務器。我會閱讀並嘗試你的幫助。只需要你在這裏查看，並幫助我更多:) –

我有了PHP的想法，在這種情況下，我可能想要更簡單的只是一個HTML文件，所以我知道我必須有一些JavaScript函數標記，你能幫助我嗎？ –

在我的回答結尾添加了一個JS示例 – xelco52

索引。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>

要在按提交按鈕

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-30 06:07:46

HTML表單在點擊提交按鈕時做一些「動作」

回答

相關問題