深入瞭解表單元素

在先前的單元中，您已瞭解 如何使用 <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 屬性值的網址發出要求。此外，瀏覽器會檢查「Submit」按鈕是否具有 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">。

提示： 你可以使用 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 元素
• 「提交」按鈕最佳做法