在JavaScript中處理表單

探索使用HTML和JavaScript中的表單的基礎知識

表單是HTML和Web平台的極其重要的組成部分。它們使用戶可以與頁面進行交互，並且

還有更多。

默認情況下，表單將其內容提交到服務器端端點，默認情況下是頁面URL本身：

<form>
  ...
  <input type="submit">
</form>

我們可以通過設置action表單元素的屬性，使用由method屬性，默認為GET：

<form action="/contact" method="POST">
  ...
  <input type="submit">
</form>

點擊提交輸入元素後，瀏覽器向POST請求/contact相同來源（協議，域和端口）上的URL。

使用JavaScript，我們可以攔截此事件，以異步方式提交表單（使用XHR和拿來），我們還可以對單個表單元素上發生的事件做出反應。

我只是描述了沒有JavaScript的表單的默認行為。

為了開始使用JavaScript處理表單，您需要攔截submit表單元素上的事件：

const form = document.querySelector('form')
form.addEventListener('submit', event => {
  // submit event detected
})

現在在Submit事件處理函數中，我們將event.preventDefault()防止默認行為並避免表單提交以重新加載頁面的方法：

const form = document.querySelector('form')
form.addEventListener('submit', event => {
  // submit event detected
  event.preventDefault()
})

此時，單擊表單中的“提交事件”按鈕將不會執行任何操作，除了為我們提供控件。

我們可以在表單元素中監聽許多事件

input更改元素值時在表單元素上觸發
change當元素值更改時在表單元素上觸發。在文字的情況下input元素和textarea，當元素失去焦點時，它只會被觸發一次（不適用於鍵入的每個單個字符）
cut當用戶從表單元素剪切文本時觸發
copy用戶從表單元素複製文本時觸發
paste用戶將文本粘貼到表單元素中時觸發
focus當表單元素獲得焦點時觸發
blur當表單元素失去焦點時觸發

這是Codepen上的示例表單演示：

Tech Wiki Online!