在前一個單元中,您已瞭解如何使用 <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
要求傳送檔案。
隨堂測驗
測驗您對表單元素的相關知識
提交檔案需要的「enctype
」值為何?
multipart/form-data
multipart/form-files
form-data
form-files
可以在沒有 <form>
的情況下傳送使用者資料嗎?
如何提交 <form>
?
<button>
。Enter
鍵。<input type="image">
。