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

參閱這份表單簡介，瞭解網頁版表單的基本使用概念 元素。

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

如何利用 HTML 達成此目標？

在 HTML 中，您可以使用 form 元素 (<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 執行指令碼 如何處理表單資料？您會該怎麼做？ 立即試用！

<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> 元素。