深入瞭解表單元素

在前一個單元中，您已瞭解如何使用 <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 屬性值的網址發出要求。此外，瀏覽器會檢查「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"，就能做為「Submit」按鈕。另一種做法是使用 <input type="submit" value="Submit">。

第三個選項是使用 <input type="image" alt="Submit" src="submit.png"> 建立圖形的「Submit」按鈕。不過，您現在可以透過 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 元素
• 提交按鈕的最佳做法