当点击提交按钮时，HTML 表单执行一些“操作”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11006443/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML form do some "action" when hit submit button
提问by Ronaldinho Learn Coding
I would like to learn about HTML forms. For example, I have 2 input text fields for first name and last name and a submit button. When the submit button is clicked, I would like the webpage to display something like: Your Name is "First Name" "Last Name".
我想了解 HTML 表单。例如，我有 2 个用于名字和姓氏的输入文本字段和一个提交按钮。单击提交按钮时，我希望网页显示如下内容：您的名字是“名字”“姓氏”。
<!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>
What do I need to have here in order to have some "action" when I click that button?
当我点击那个按钮时，我需要在这里做什么才能有一些“动作”？
Edit:Ok now I figure out that I need either PHP or JavaScript here. Can some one suggest or provide a sample code of PHP or Js as a reference for me?
编辑：好的，现在我发现我需要在这里使用 PHP 或 JavaScript。有人可以建议或提供PHP或Js的示例代码作为我的参考吗？
回答by xelco52
Ok, I'll take a stab at this. If you want to work with PHP, you will need to install and configure both PHP and a webserver on your machine. This article might get you started: PHP Manual: Installation on Windows systems
好的，我会尝试一下。如果你想使用 PHP，你需要在你的机器上安装和配置 PHP 和网络服务器。本文可能会让您入门：PHP 手册：在 Windows 系统上安装
Once you have your environment setup, you can start working with webforms. Directly From the article: Processing form data with PHP:
设置好环境后，您就可以开始使用网络表单了。直接来自文章：使用 PHP 处理表单数据：
For this example you will need to create two pages. On the first page we will create a simple HTML form to collect some data. Here is an example:
<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>This page will send the Name and Age data to the page process.php. Now lets create process.php to use the data from the HTML form we made:
对于此示例，您将需要创建两个页面。在第一页上，我们将创建一个简单的 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";
?>
As you may be aware, if you leave out the method="post" part of the form, the URL with show the data. For example if your name is Bill Jones and you are 35 years old, our process.php page will display as http://yoursite.com/process.php?Name=Bill+Jones&Age=35If you want, you can manually change the URL in this way and the output will change accordingly.
您可能知道，如果您省略表单的 method="post" 部分，则 URL 会显示数据。例如，如果您的名字是 Bill Jones 并且您已经 35 岁，我们的 process.php 页面将显示为 http://yoursite.com/process.php?Name=Bill+Jones&Age=35如果您愿意，您可以手动更改以这种方式访问 URL，输出将相应更改。
Additional JavaScript Example
附加 JavaScript 示例
This single file example takes the html from your question and ties the onSubmit event of the form to a JavaScript function that pulls the values of the 2 textboxes and displays them in an alert box.
这个单文件示例从您的问题中获取 html，并将表单的 onSubmit 事件与 JavaScript 函数联系起来，该函数提取 2 个文本框的值并将它们显示在警告框中。
Note: document.getElementById("fname").valuegets the object with the IDtag that equals fnameand then pulls it's value- which in this case is the text in the First Name textbox.
注意：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>
回答by Amaresh Tiwari
index.html
索引.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>
After that one more file which page you want to display after pressing the submit button
在按下提交按钮后，您要显示的页面又是一个文件
submit.php
提交.php
<html>
<body>
Your First Name is - <?php echo $_POST["firstname"]; ?><br>
Your Last Name is - <?php echo $_POST["lastname"]; ?>
</body>
</html>
