HTML表单执行一些“操作”当点击提交按钮时 [英] HTML form do some "action" when hit submit button
问题描述
我想了解HTML表单。例如，我有2个名字和姓氏的输入文本字段和一个提交按钮。点击提交按钮后，我希望网页显示如下：您的姓名是名字姓。
<！DOCTYPE html>
< html>
< body>
< form>
名字：< input type =textname =firstname/>< br />
姓氏：< input type =textname =lastname/>< br />
< input type =submitvalue =Submit/>
< / form>
< / body>
< / html>
当我点击该按钮时，为了有一些动作，我需要什么？
编辑：现在我知道我需要PHP或JavaScript。有人可以建议或提供PHP或Js的示例代码作为参考吗？
好的，我会试穿这个。如果你想使用PHP，你需要在你的机器上安装和配置PHP和一个web服务器。本文可能会帮助您开始： PHP手册：在Windows系统上安装 p>
完成环境设置后，即可开始使用webforms。直接从文章：使用PHP处理表单数据：
在这个例子中，您需要创建两个页面。在第一页
中，我们将创建一个简单的HTML表单来收集一些数据。以下是一个
示例：
< html>
< head>
< title>测试页< /标题>
< / head>
< body>
< h2>数据收集< / h2>< p>
< form action =process.phpmethod =post>
< table>
< tr>
< td>名称：< / td>
< td>< input type =textname =Name/>< / td>
< / tr>
< tr>
< td>年龄：< / td>
< td>< input type =textname =Age/>< / td>
< / tr>
< tr>
< td colspan =2align =center>
< input type =submit/>
< / td>
< / tr>
< / table>
< / form>
< / body>
< / html>
此页面将
发送名称和年龄数据到页面process.php。现在让我们创建process.php来使用
来自我们制作的HTML表单中的数据：
<？php
print你的名字是。 $名称;
打印< br />;
打印你是。 $年龄。 岁;
打印< br />; $ old = 25 + $年龄;
打印25年后你将会。 $旧。 岁;
？>
由于您
可能知道， method =post部分的表单，
URL显示数据。例如，如果你的名字是比尔琼斯，你
是35岁，我们的process.php页面将显示为
http://yoursite.com/process.php?Name=Bill+Jones&Age=35 如果你愿意，
你可以以这种方式手动更改网址，输出会相应地更改
。
其他JavaScript示例
这个单个文件示例从您的问题中获取html，并将表单的onSubmit事件绑定到JavaScript函数，该函数将2个文本框的值拉入并显示一个警报框。
注意： document.getElementById（fname）。value 获取对象使用 ID 标签（等于 fname >），然后将其取为值 - 在这种情况下，它是名字文本框中的文本。
< html>
< head>
< script type =text / javascript>
函数ExampleJS（）{
var jFirst = document.getElementById（fname）.value;
var jLast = document.getElementById（lname）.value;
alert（你的名字是：+ jFirst ++ jLast）;
}
< / script>
< / head>
< body>
< FORM NAME =myformonSubmit =JavaScript：ExampleJS（）>
名字：< input type =textid =fnamename =firstname/>< br />
姓氏：< input type =textid =lnamename =lastname/>< br />
< input name =Submittype =submitvalue =Update/>
< / FORM>
< / body>
< / html>
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".
<!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?
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
Once you have your environment setup, you can start working with webforms. Directly From the article: Processing form data with 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:
<?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=35 If you want, you can manually change the URL in this way and the output will change accordingly.
Additional JavaScript Example
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.
Note: document.getElementById("fname").value gets the object with the ID tag that equals fname and then pulls it's value - which in this case is the text in the First Name textbox.
<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>
这篇关于HTML表单执行一些“操作”当点击提交按钮时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
