资源

表单语法

一个网页代表我们 web 应用程序的界面，而后台脚本（例如 PHP）实现应用程序逻辑。我们必须从界面收集用户输入，并将其发送到应用程序逻辑。HTML 输入控件是收集用户输入的元素，表单元素可以用来将数据发送到后端。稍后我们将学习如何使用 JavaScript 以编程方式提交输入。

常见的输入控件包括文本字段、文本区域、下拉列表（选择）、复选框、单选按钮、重置按钮和提交按钮。详细的用法和示例可以在下面的列表中找到

示例

让我们为我们的待办事项 web 应用程序添加添加和删除功能。回想一下，我们使用一个文本文件来存储待办事项，每个待办事项占用单独的一行。要将新的待办事项添加到列表中，我们必须收集新的待办事项作为用户输入，将其发送到服务器上的脚本，并将新的待办事项附加到我们现有的待办事项列表中。

添加待办事项

我们可以使用一个 add.php 输出一个 HTML 表单，并要求它提交表单中的用户输入到 add_submit.php。

<!--add.php-->
<form action="add_submit.php">
  <label>TODO:<input type="text" name="todo"/></label>
  <input type="submit" name="send" value="Add"/>
</form>

在下面的 add_submit.php 脚本中，我们获取参数（todo）的值，如果参数被发送并且包含非空格字符，则将其附加到文本文件。在列表的最后，我们包含 list.php 以输出当前的待办事项列表作为对用户的反馈。请注意，一旦用户提交新的待办事项，响应将显示在另一个页面（add_submit.php）上，该页面不包含表单。如果用户想要继续添加新的待办事项，她将需要点击后退按钮，这很不方便。

# add_submit.php
<?php
  $todo = $_GET["todo"];
 
  if (isset($todo) && strlen(trim($todo)) != 0){
    file_put_contents("todolist.txt", $todo."\n", FILE_APPEND);
  }
  include "list.php";
?>

<ul>
<?php
  # list.php
  $todos = file("todolist.txt", FILE_IGNORE_NEW_LINES);
  $count = count($todos);
  for ($i=0; $i<$count; $i++){
?>
    <li><?=$todos[$i]?></li>
<?php
  }
?>
</ul>

实际上，我们可以将这两个脚本合并成一个，这样用户就可以始终看到添加表单和当前列表，并能够添加新的待办事项。我们将把我们的脚本重命名为 todo.php。

<form action="todo.php">
  <label>TODO:<input type="text" name="todo"/></label>
  <input type="submit" name="send" value="Add"/>
</form>
<?php
  $todo = $_GET["todo"];
  
  if (isset($todo) && strlen(trim($todo)) != 0){
    file_put_contents("todolist.txt", $todo."\n", FILE_APPEND);
  }

  include "list.php";
?>

请注意，附加到每行末尾的“\n”很重要，因为我们希望在 todolist.txt 文件中每个待办事项都位于单独的一行。当请求时，此脚本将始终输出添加表单和当前列表（通过 list.php）。如果发送了名为“todo”的参数，并且它不为空，则参数的值将附加到 todolist.txt 文件中。由 todo.php 生成的页面的屏幕截图如下所示

删除待办事项

在下一步中，我们将允许用户删除列表中的单个待办事项。我们需要修改用户界面（网页），以便用户可以触发删除操作。当链接在页面上被点击时，浏览器会向服务器上由操作 URL 标识的资源发送请求。我们可以在每个待办事项之后添加一个删除链接，并使用它来触发该项目的删除。我们还需要在服务器上创建一个脚本来响应此类请求。该脚本需要知道用户要删除哪个待办事项。不知何故，每个请求都需要针对每个项目是特定的。我们之前了解到，我们可以将查询字符串附加到请求的 URL 以对其进行参数化。现在的问题是参数应该是什么样子。由于每个待办事项都作为文本文件 todolist.txt 中的一行文本存储，如果我们知道行号，我们可以通过删除文本文件中的该行来删除任何待办事项。以下脚本测试了按行号删除一行的想法。行号是硬编码的，但最终我们希望将其作为从浏览器发送的参数获取。以下列出代码中使用的函数的用法。

<?php
  $line_number = 6;
  if (isset($line_number)){
    $lines = file("todolist.txt");
    array_splice($lines, $line_number, 1);
    file_put_contents("todolist.txt", implode("",$lines));
}
?>

在客户端（在 HTML 文件中），我们可以使用以下格式的 URL 来发送行号。参数“line_number”的名称和值将是特定待办事项的实际行号。

http://host/path/to/delete.php?line_number=3

我们需要修改 list.php 文件以输出删除链接。

   <ul>
      <?php
        $todos = file("todolist.txt", FILE_IGNORE_NEW_LINES);
        $count = count($todos);
        for ($i=0; $i<$count; $i++){
      ?>
          <li>
            <?=$todos[$i]?>
            [<a href="delete.php?line_number=<?=$i?>">delete</a>]
          </li>
      <?php
        }
      ?>
    </ul>

修改后的 web 界面应如下所示

HTML 源代码如下所示

<form action="todo.php">
  <label>TODO:<input type="text" name="todo"/></label>
  <input type="submit" name="send" value="Add"/>
</form>
    <ul>
          <li>
            Buy milk            [<a href="delete.php?line_number=0">delete</a>]
          </li>
          <li>
            Buy eggs            [<a href="delete.php?line_number=1">delete</a>]
          </li>
          <li>
            Go for a run            [<a href="delete.php?line_number=2">delete</a>]
          </li>
          <li>
            Read a book            [<a href="delete.php?line_number=3">delete</a>]
          </li>
          <li>
            Teach a class            [<a href="delete.php?line_number=4">delete</a>]
          </li>
          <li>
            readsleepsleep            [<a href="delete.php?line_number=5">delete</a>]
          </li>
          <li>
            two            [<a href="delete.php?line_number=6">delete</a>]
          </li>
          </ul>

如您所见，“line_number”参数的值对应于 todolist.txt 文件中项目的实际行号。现在，每当点击删除链接时，delete.php 脚本将接收一个带有 line_number 参数的请求。我们现在可以修改我们的 delete.php 脚本以处理此类删除请求。

<?php
  $line_number = $_GET["line_number"];
  $lines = file("todolist.txt");
  array_splice($lines, $line_number, 1);
  file_put_contents("todolist.txt", implode("",$lines));

请注意，删除链接指向与 todo.php 不同的文件（输出我们的主页面），导致浏览器停留在空的 delete.php 页面上，因为它没有输出任何内容。

单页应用

如果我们可以停留在同一页面（todo.php）上，那就太好了。以下代码显示了整个应用程序在一个脚本中的实现

<form action="todo.php">
  <label>TODO:<input type="text" name="todo"/></label>
  <input type="submit" name="send" value="Add"/>
</form>
<?php
  $todo = $_GET["todo"];

  if (isset($todo) && strlen(trim($todo)) != 0){
    file_put_contents("todolist.txt", $todo."\n", FILE_APPEND);
  }

  $line_number = $_GET["line_number"];
  if (isset($line_number)){
    $lines = file("todolist.txt");
    array_splice($lines, $line_number, 1);
    file_put_contents("todolist.txt", implode("",$lines));
  }
?>
<ul>
<?php
  $todos = file("todolist.txt", FILE_IGNORE_NEW_LINES);
  $count = count($todos);
  for ($i=0; $i<$count; $i++){
?>
  <li>
    <?=$todos[$i]?>
    [<a href="todo.php?line_number=<?=$i?>">delete</a>]
  </li>
<?php
  }
?>
</ul>

文件开头的静态 HTML 输出添加表单。第一个 if 块处理添加功能。第二个 if 块处理删除。for 块列出当前列表中的待办事项。请注意，此文件输出的所有 URL 都指向 todo.php 脚本。