您可以使用单个 HTML 文件制作表单吗？

Question

我可以找到的所有制作下拉表单的示例都涉及拥有一个单独的 PHP 文件。 我正在尝试将一些代码嵌入到 Weebly 页面中，所以我不确定是否可以在服务器上保存一个单独的 PHP 文件。 那么有可能完全避免使用 PHP 吗？ 也许用 JavaScript 和 jQuery 做所有事情？ 或者将表单和 PHP 放在同一个 HTML 文件中？

更具体地说，我想要做的是制作一个页面，其中有几个下拉表单。 用户选择几个选项，点击提交，客户端后端对输入进行一些计算，并打印出结果。

我一直在尝试按照本指南进行下拉： https : //www.w3schools.com/tags/tag_select.asp

我一直在关注以表单形式使用 PHP： https : //www.ntchosting.com/encyclopedia/scripting-and-programming/php/php-in/

根据该指导，我创建了此非工作代码：

<!DOCTYPE html>
<?php
  $Level = $_POST["level"];
?>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form action="<?php echo $PHP_SELF;?>" method="post">
      Choose a level: <select name="level" id="level">
        <option value="high">High</option>
        <option value="med">Medium</option>
        <option value="low">Low</option>
      </select>
    </form>
    <p>
    <?php
      echo "".$Level;
    ?>
    </p>
  </body>
</html>

我说它不起作用，因为当我单击下拉列表中的任何内容时，什么也没有发生。

更多信息来自评论中的交流：

啊，这真的不需要和服务器交互。 它最终将成为一种工具，以便客户可以获得自动生成的估计报价。 所以他们回答了一些问题（即选择一些下拉列表并在字段中输入一些数字）并单击提交，然后网页会吐出估算值。 没有保存任何信息或类似的东西，所以在客户端处理一切应该没问题。 但是，根据您的描述，这听起来好像不能用 PHP 来完成。 我认为 Weebly 不会让我更改文件扩展名。

Answer 1

你当然可以。 您可以使用表单上的onSubmit属性来运行一些 javascript（以及扩展名 jquery），而无需实际提交表单。 更具体地说，它看起来像这样：

<form onSubmit="return yourJavascriptFunction()" method="post">

在您的脚本中，您可以使用document.getElementById(yourDropdownID)从表单的字段中获取下拉值并执行任何必要的操作。 如果您不希望表单重定向，只需return false; 在你的功能上。 使用这种方法，你真的不需要表单，可以使用一些带有 id 的<select>标签，以及一个伪提交按钮：

<button onclick="yourFunction()">Submit</button>

Answer 2

如果您想使用 php 执行此操作，您必须将扩展名更改为 php 并添加一个提交按钮，否则您可以在没有 php 的情况下轻松执行此操作，如下所示。

<form action="#" method="post">
      Choose a level: <select name="level" id="level" onChange="document.getElementById('selectedValue').innerHTML = this.value;">
        <option value="high">High</option>
        <option value="med">Medium</option>
        <option value="low">Low</option>
      </select>
    </form>
    <p> <span id="selectedValue"></span></p>

Answer 3

删除 DOCTYPE html 并将文件的扩展名更改为 .php

您可以使用单个 HTML 文件制作表单吗？

问题描述

3 个解决方案

解决方案1
1 已采纳 2020-08-28 22:15:05

解决方案2
0 2020-08-28 22:17:03

解决方案3
-4 2020-08-28 21:57:32

您可以使用单个 HTML 文件制作表单吗？

问题描述

3 个解决方案

解决方案1 1 已采纳 2020-08-28 22:15:05

解决方案2 0 2020-08-28 22:17:03

解决方案3 -4 2020-08-28 21:57:32

解决方案1
1 已采纳 2020-08-28 22:15:05

解决方案2
0 2020-08-28 22:17:03

解决方案3
-4 2020-08-28 21:57:32