透過本表單元素簡介,瞭解使用網頁版表單的基本概念。
假設您想在網站上詢問使用者最喜歡的動物。 首先,您需要設法收集資料。
如何使用 HTML 執行這項操作?
在 HTML 中,您可以使用表單元素 (<form>
)、包含 <label>
的 <input>
和提交 <button>
進行建構。
什麼是表單元素?
<form>
<label for="animal">What is your favorite animal?</label>
<input type="text" id="animal" name="animal">
<button>Save</button>
</form>
表單元素包含起始標記 <form>
、起始標記中定義的選用屬性,以及結束標記 </form>
。
您可以在起始標記和結束標記之間加入表單元素,例如 <input>
和 <textarea>
,以用於不同類型的使用者輸入內容。下一個單元將進一步介紹表單元素。
資料處理在哪裡?
提交表單時 (例如當使用者點選「Submit」按鈕時),瀏覽器會提出要求。指令碼可以回應該要求並處理資料。
根據預設,要求會傳送至顯示表單的網頁。
假設您想在 https://web.dev
執行指令碼來處理表單資料,這時您會如何處理?快來體驗看看!
您可以使用 action
屬性選取指令碼的位置。
<form action="https://example.com/animals"> ... </form>
上述範例向 https://example.com/animals
發出要求。example.com
後端的指令碼可以處理對 /animals
的要求,以及處理表單中的資料。
資料如何轉移?
根據預設,系統會以 GET
要求的形式傳送表單資料,並將提交的資料附加到網址。如果使用者在上述範例中提交「青蛙」,瀏覽器就會要求下列網址:
https://example.com/animals?animal=frog
在這種情況下,您可以從網址取得資料,以便存取前端或後端的資料。
如有需要,可以變更方法屬性,指示表單使用 POST
要求。
<form method="post">
...
</form>
使用 POST
時,資料會包含在要求主體中。
這項資料不會顯示在網址中,而且只能透過前端或後端指令碼存取。
這時應採用哪種方法?
這兩種方法都有用途。
如果是處理機密資料的表單,請使用 POST
方法。資料會經過加密 (如果使用 HTTPS),且只能透過處理要求的後端指令碼存取。資料不會顯示在網址中。常見的例子是登入表單。
如果資料可共用,您可以使用 GET
方法。如此一來,資料就會連同網址一起加入瀏覽器記錄中。
搜尋表單經常會用到這項資訊。這樣一來,就能將搜尋結果網頁加入書籤。
現在,您已瞭解表單元素本身,接下來就要認識表單欄位,以便建立互動表單。
隨堂測驗
測驗您對表單元素的相關知識
表單元素的開始標記看起來是什麼樣子?
</form>
<form>
元素的結束標記。<form-container>
<form>
<form-element>
哪一個屬性可用來定義 <form>
的處理位置?
where
action
action
屬性會定義 <form>
的處理方式。href
url
預設的要求方法為何?
GET
POST