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

透過本表單元素簡介，瞭解使用網頁版表單的基本概念。

假設您想在網站上詢問使用者最喜歡的動物。 首先，您需要設法收集資料。

如何使用 HTML 執行這項操作？

在 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>，以用於不同類型的使用者輸入內容。下一個單元將進一步介紹表單元素。

資料處理在哪裡？

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

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

假設您想在 https://web.dev 執行指令碼來處理表單資料，這時您會如何處理？快來體驗看看！

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

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

資料如何轉移？

根據預設，系統會以 GET 要求的形式傳送表單資料，並將提交的資料附加到網址。如果使用者在上述範例中提交「青蛙」，瀏覽器就會要求下列網址：

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

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

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

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

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

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

這時應採用哪種方法？

這兩種方法都有用途。

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

如果資料可共用，您可以使用 GET 方法。如此一來，資料就會連同網址一起加入瀏覽器記錄中。 搜尋表單經常會用到這項資訊。這樣一來，就能將搜尋結果網頁加入書籤。

現在，您已瞭解表單元素本身，接下來就要認識表單欄位，以便建立互動表單。

隨堂測驗

測驗您對表單元素的相關知識

資源

<form> 元素。