深入瞭解表單元素

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

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:1.
  • Safari:1.

資料來源

您不需要在 <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 要求處理提交的資料。 或在後端使用 GETPOST 要求時依據程式碼呼叫。 進一步瞭解 要求類型及傳送表單資料

提交表單後,瀏覽器會向網址發出 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 要求傳送檔案。

隨堂測驗

測試您對表單元素的瞭解程度

提交檔案所需的「enctype」值為何?

multipart/form-files
form-data
form-files
multipart/form-data

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

有,使用 JavaScript。
有,使用 HTML5。
可以,支援 Flash。

如何提交<form>

按下 Enter 鍵。
以上皆是。
按一下<button>
按一下<input type="image">

資源