我想了解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>
当我点击该按钮时,我需要在这里获得一些"动作"？
编辑:好的,现在我发现我需要PHP或JavaScript.有人可以建议或提供PHP或Js的示例代码作为参考吗？
xel*_*o52 25
好的,我会抓住这个.如果您想使用PHP,则需要在计算机上安装和配置PHP和Web服务器.本文可能会帮助您入门:PHP手册:在Windows系统上安装
完成环境设置后,即可开始使用webforms.直接来自文章:使用PHP处理表单数据:
对于此示例,您将需要创建两个页面.在第一页,我们将创建一个简单的HTML表单来收集一些数据.这是一个例子:
Run Code Online (Sandbox Code Playgroud)<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";
?>
您可能知道,如果您省略表单的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获取具有ID等于的标记的对象,fname然后将其拉出value- 在本例中为First Name文本框中的文本.
<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>