19

我想了解 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 的示例代码作为我的参考吗？

4

2 回答 2

30

好的，我会尝试一下。如果你想使用 PHP，你需要在你的机器上安装和配置 PHP 和 web 服务器。本文可能会让您入门：PHP 手册：Windows 系统上的安装

设置好环境后，您就可以开始使用 Web 表单了。直接来自文章：使用 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";   
?>

您可能知道，如果您省略了表单的 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标签为 equals的对象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>
于 2012-06-13T00:31:09.143 回答
1

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

在按下提交按钮后，再添加一个文件要显示哪个页面

提交.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 回答