Xử lý các biểu mẫu trong JavaScript

Khám phá những điều cơ bản về cách làm việc với các biểu mẫu trong HTML và JavaScript

Biểu mẫu là một phần cực kỳ quan trọng của HTML và Nền tảng web. Chúng cho phép người dùng có thể tương tác với trang và

  • tìm kiếm thứ gì đó trên trang web
  • kích hoạt bộ lọc để cắt các trang kết quả
  • Gửi Thông Tin

và nhiều hơn nữa.

Theo mặc định, các biểu mẫu gửi nội dung của chúng đến điểm cuối phía máy chủ, theo mặc định là chính URL trang:

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

Chúng tôi có thể ghi đè hành vi này bằng cách đặtactionthuộc tính của phần tử biểu mẫu, sử dụng phương thức HTML được xác định bởimethodthuộc tính, mặc định làGET:

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

Khi nhấp vào phần tử đầu vào gửi, trình duyệt sẽ đưa ra yêu cầu ĐĂNG tới/contactURL trên cùng một nguồn gốc (giao thức, miền và cổng).

Sử dụng JavaScript, chúng tôi có thể chặn sự kiện này, gửi biểu mẫu không đồng bộ (vớiXHRTìm nạp), và chúng ta cũng có thể phản ứng với các sự kiện xảy ra trên các phần tử biểu mẫu riêng lẻ.

Chặn sự kiện gửi biểu mẫu

Tôi chỉ mô tả hành vi mặc định của biểu mẫu, không có JavaScript.

Để bắt đầu làm việc với các biểu mẫu bằng JavaScript, bạn cần chặnsubmitsự kiện trên phần tử biểu mẫu:

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

Bây giờ bên trong hàm xử lý sự kiện gửi, chúng tôi gọievent.preventDefault()phương pháp để ngăn chặn hành vi mặc định và tránh gửi biểu mẫu để tải lại trang:

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

Tại thời điểm này, việc nhấp vào nút gửi sự kiện trong biểu mẫu sẽ không làm bất cứ điều gì, ngoại trừ việc cung cấp cho chúng tôi quyền kiểm soát.

Làm việc với các sự kiện phần tử đầu vào

Chúng tôi có một số sự kiện mà chúng tôi có thể lắng nghe trong các phần tử biểu mẫu

  • inputđược kích hoạt trên các phần tử biểu mẫu khi giá trị phần tử được thay đổi
  • changeđược kích hoạt trên các phần tử biểu mẫu khi giá trị phần tử bị thay đổi. Trong trường hợp văn bảninputcác yếu tố vàtextarea, nó chỉ được kích hoạt một lần khi phần tử mất tiêu điểm (không phải cho mọi ký tự được nhập)
  • cutđược kích hoạt khi người dùng cắt văn bản khỏi phần tử biểu mẫu
  • copyđược kích hoạt khi người dùng sao chép văn bản từ phần tử biểu mẫu
  • pasteđược kích hoạt khi người dùng dán văn bản vào phần tử biểu mẫu
  • focusđược kích hoạt khi phần tử biểu mẫu có được tiêu điểm
  • blurđược kích hoạt khi phần tử biểu mẫu mất tiêu điểm

Đây là bản demo biểu mẫu mẫu trên Codepen:

Xem bútBản trình diễn sự kiện biểu mẫubởi Flavio Copes (@flaviocopes) trênCodePen.

Tech Wiki Online!