發現在HTML和JavaScript中處理表單的基礎知識
表單是HTML和網頁平台的一個非常重要的組成部分。它們允許用戶與頁面互動,並可以…
- 搜索網站上的內容
- 觸發過濾器以縮小結果頁面
- 發送信息
等等。
默認情況下,表單將其內容提交到服務器端點,默認情況下是頁面URL本身:
<form>
...
<input type="submit">
</form>
我們可以通過設置表單元素的 action
屬性來覆蓋此行為,使用由 method
屬性定義的HTML方法,默認為 GET
:
<form action="/contact" method="POST">
...
<input type="submit">
</form>
點擊提交輸入元素後,瀏覽器會向同一域(協議、域名和端口)的 /contact
URL 發送一個POST請求。
使用JavaScript,我們可以攔截此事件,異步提交表單(使用XHR和Fetch),還可以對單個表單元素上的事件做出反應。
攔截表單提交事件
我剛剛描述了表單的默認行為,未使用JavaScript。
要開始使用JavaScript與表單一起工作,您需要在表單元素上攔截 submit
事件:
const form = document.querySelector('form')
form.addEventListener('submit', event => {
// 檢測到提交事件
})
現在,在提交事件處理程序函數內部,我們調用 event.preventDefault()
方法來阻止默認行為,避免表單提交重新加載頁面:
const form = document.querySelector('form')
form.addEventListener('submit', event => {
// 檢測到提交事件
event.preventDefault()
})
此時,單擊表單中的提交事件按鈕將不會做任何事情,除了讓我們控制。
處理輸入元素事件
我們可以在表單元素上監聽許多事件
input
:當元素值更改時,在表單元素上觸發change
:當元素值更改時,在表單元素上觸發。對於文本input
元素和textarea
,它僅在元素失去焦點時觸發一次(每輸入個字元不觸發一次)cut
:當用戶從表單元素中剪切文本時觸發copy
:當用戶從表單元素中複製文本時觸發paste
:當用戶將文本粘貼到表單元素中時觸發focus
:當表單元素獲得焦點時觸發blur
:當表單元素失去焦點時觸發
這裡有一個Codepen上的示例表單演示:
参考:Codepen上的表單事件示例