資源

表單語法

一個網頁代表我們 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 指令碼。