深入瞭解表單元素

在先前的單元中，您已瞭解如何使用 <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> 屬性。資料會以 GET 的形式傳送 或POST根據 method 屬性提出要求。如未出現 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>

確保使用者可以提交表單

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

您可以透過多種方式新增「提交」按鈕。 您可以選擇在表單中使用 <button> 元素。 只要不是 type="button"，它就能當做「提交」按鈕使用。 另一種做法是使用 <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 元素
• 提交按鈕的最佳做法