透過表單取得使用者的資料

透過這份表單元素簡介，瞭解在網路上使用表單的基本概念。

假設您想詢問網站訪客最喜歡的動物。首先，您需要收集資料。

在 HTML 中，您可以使用表單元素 (<form>)、具有 <label> 的 <input>，以及提交 <button> 來建構這個項目。

<form>
  <label for="animal">What is your favorite animal?</label>
  <input type="text" id="animal" name="animal">
  <button>Save</button>
</form>

什麼是表單元素？

表單元素包含開始標記 <form>、開始標記中定義的選用屬性，以及結束標記 </form>。

在開始和結束標記之間，您可以加入表單元素，例如 <input> 和 <textarea>，以供不同類型的使用者輸入內容。下一個單元會進一步說明表單元素。

資料的處理地點為何？

提交表單時 (例如使用者點選「提交」按鈕)，瀏覽器會發出要求。指令碼可以回應這項要求並處理資料。

根據預設，要求會傳送至顯示表單的網頁。

假設您想在 https://web.dev 執行指令碼來處理表單資料。你會怎麼做？在 CodePen 上試試看！

      <form action="https://example.com/animals"></form>

上述範例會向 https://example.com/animals 發出要求。example.com後端的指令碼可以處理對 /animals 的要求，並處理表單中的資料。

資料的轉移方式為何？

根據預設，表單資料會以 GET 要求的形式傳送，提交的資料會附加至網址。如果使用者在先前的範例中提交「frog」，瀏覽器會向下列網址提出要求：

https://example.com/animals?animal=frog

在這種情況下，您可以從網址取得資料，存取前端或後端的資料。

如要指示表單使用 POST 要求，可以變更方法屬性。

<form method="post">
...
</form>

使用 POST 時，資料會包含在要求主體中。

資料不會顯示在網址中，只能透過前端或後端指令碼存取。

您該採用哪種方法？

這兩種方法各有用途。

如要處理機密資料，請使用 POST 方法。資料會經過加密 (如果您使用 HTTPS)，且只有處理要求的後端指令碼可以存取。網址中不會顯示資料。常見的例子是登入表單。

如果資料可共用，您可以使用 GET 方法。 接著，系統會將資料加入瀏覽器記錄，因為資料會納入網址中。 搜尋表單通常會使用這項功能。方便你將搜尋結果網頁加入書籤。

瞭解表單元素本身後，接著就來看看如何使用表單欄位，讓表單具有互動性。

隨堂測驗

測試您對表單元素的瞭解程度

資源

<form> 元素。