JavaScriptでのフォームの処理

HTMLとJavaScriptでフォームを操作するための基本をご覧ください

フォームは、HTMLとWebプラットフォームの非常に重要な部分です。これにより、ユーザーはページを操作して、

  • サイトで何かを検索する
  • 結果ページをトリミングするためのトリガーフィルター
  • 情報を送る

そしてはるかに。

デフォルトでは、フォームはコンテンツをサーバー側のエンドポイントに送信します。サーバー側のエンドポイントは、デフォルトではページURL自体です。

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

この動作をオーバーライドするには、actionによって定義されたHTMLメソッドを使用したform要素の属性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
})

次に、送信イベントハンドラー関数内で、event.preventDefault()デフォルトの動作を防ぎ、ページをリロードするためのフォーム送信を回避する方法：

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

この時点で、フォームの[イベントの送信]ボタンをクリックしても、制御を与える以外は何もしません。

入力要素イベントの操作

フォーム要素で聞くことができるイベントがいくつかあります

  • input要素の値が変更されたときにフォーム要素で発生します
  • change要素の値が変更されたときにフォーム要素で発生します。テキストの場合input要素とtextarea、要素がフォーカスを失ったときに1回だけ発生します（入力されたすべての文字に対してではありません）
  • cutユーザーがフォーム要素からテキストを切り取ったときに発生します
  • copyユーザーがフォーム要素からテキストをコピーしたときに発生します
  • pasteユーザーがフォーム要素にテキストを貼り付けたときに発生します
  • focusフォーム要素がフォーカスを取得したときに発生します
  • blurフォーム要素がフォーカスを失ったときに発生します

これがCodepenのサンプルフォームデモです：

ペンを見るフォームイベントのデモフラビオ・コープス（@flaviocopes） オンCodePen。

Tech Wiki Online!