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