深入瞭解表單元素

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

是否應使用 <form> 元素？

Browser Support

• 1
• 12
• 1
• 1

Source

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

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

注意： 您可以使用 JavaScript 複製表單功能，但純粹以指令碼為基礎的方法，不太可能像內建 <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 要求處理。進一步瞭解要求類型和表單資料傳輸。

注意： 「提交」按鈕可能會有 formmethod 屬性。在這種情況下，系統會使用該處定義的值。

提交表單後，瀏覽器會向 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。

注意： 請為「提交」按鈕使用可執行的名稱，例如「Proceed to Payment」或「Save Changes」，而非單純的「Submit」。在等待有效的使用者輸入內容時，請勿停用「提交」按鈕，但在表單提交後，建議您停用該按鈕，以免向伺服器發出多個要求。進一步瞭解提交按鈕的最佳做法。

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

注意： 您可以使用 enterkeyhint 屬性變更螢幕小鍵盤的 Enter 鍵標籤。這有助於使用者瞭解提交目前表單後會發生的情況。

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

注意： 請務必讓使用者有足夠的時間提交表單。在表單中定義逾時時間會導致資料遺失，並讓使用者感到不耐煩。詳情請參閱 W3C 表單逾時指南。

允許使用者提交檔案

使用 <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 要求傳送檔案。

進行隨堂測驗

測驗您對表單元素的瞭解

提交檔案時，enctype 需要哪些值？

multipart/form-data

🎉

multipart/form-files

請再試一次！

form-data

再試一下！

form-files

請再試一次！

是否可以在沒有 <form> 的情況下傳送使用者資料

否

請再試一次！

可以，只要使用 JavaScript 即可。

🎉

是，只要使用 Flash 即可。

請再試一次！

可以，只要使用 HTML5 即可。

請再試一次！

如何提交 <form>？

按一下 <button>。

請再試一次！

按下 Enter 鍵。

請再試一次！

按一下 <input type="image">。

請再試一次！

以上皆是。

🎉

資源

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