深入瞭解表單元素

在先前的單元中，您已瞭解如何使用 <form> 元素。本單元將說明表單的運作方式，以及使用表單的時機。

是否應使用 <form> 元素？

您不一定需要將表單控制項放入 <form> 元素。舉例來說，您可以提供 <select> 元素，讓使用者選擇產品類別。您不需要在此處使用 <form> 元素，因為您不會在後端儲存或處理資料。

不過，在大多數情況下，您儲存或處理使用者資料時，應使用 <form> 元素。在本單元中，您將瞭解使用 <form> 可提供許多內建功能，這些功能原本必須由您自行建構。<form> 預設內建許多無障礙功能。如果您想避免在使用者提交表單時重新載入網頁，仍可使用 <form> 元素，但請搭配使用 JavaScript 來強化表單。

<form> 的運作方式為何？

您已瞭解 <form> 是處理使用者資料的最佳方式。您可能會好奇，表單的運作方式為何？

<form> 是互動式表單控制項的容器。

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <button formaction="/name">Save</button>
</form>

表單提交功能的運作方式為何？

提交 <form> 時，瀏覽器會檢查 <form> 屬性。資料會根據 method 屬性以 GET 或 POST 要求的形式傳送。如果沒有 method 屬性，系統會對目前網頁的網址提出 GET 要求。

您如何存取及處理表單資料？提交的資料可由前端 JavaScript 使用 GET 要求處理，也可以由後端程式碼使用 GET 或 POST 要求處理。進一步瞭解要求類型和表單資料傳輸。

提交表單後，瀏覽器會向 action 屬性的值 (網址) 提出要求。此外，瀏覽器會檢查「提交」按鈕是否具有 formaction 屬性。在這種情況下，系統會使用該處定義的網址。

此外，瀏覽器會在 <form> 元素上查詢其他屬性，例如決定是否應驗證表單 (novalidate)、是否應使用自動完成功能 (autocomplete="off")，或應使用哪種編碼 (accept-charset)。

嘗試建立表單，讓使用者提交自己最喜歡的顏色。資料應以 POST 要求傳送，且資料處理的網址應為 /color。

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

確保使用者能提交表單

提交表單的方式有兩種。您可以點選「提交」按鈕，或是在使用任何表單控制項時按下 Enter。

您可以透過多種方式新增「提交」按鈕。其中一個方法是在表單中使用 <button> 元素。只要您不使用 type="button"，即可將其用作「提交」按鈕。另一個選項是使用 <input type="submit" value="Submit">。

第三個選項是使用 <input type="image" alt="Submit" src="submit.png">，建立圖形化的「提交」按鈕。不過，現在您可以使用 CSS 建立圖形按鈕，因此不建議使用 type="image"。

允許使用者提交檔案

使用 <input type="file"> 可讓使用者視需要上傳及提交檔案。

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

首先，請在表單中新增含有 type="file" 的 <input> 元素。如果使用者可以上傳多個檔案，請新增 multiple 屬性。

您還需要進行另一項變更，確保使用者能夠上傳檔案：在表單中設定 enctype 屬性。預設值為 application/x-www-form-urlencoded。

<form method="post" enctype="multipart/form-data">
…
</form>

為確保檔案可提交，請將其變更為 multipart/form-data。如未設定此編碼，就無法透過 POST 要求傳送檔案。

進行隨堂測驗

測驗您對表單元素的瞭解

資源

• 表單 HTML 元素
• 提交按鈕最佳做法