發現在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上的表單事件示例