HTML、CSS、jQueryを使ってフォームの自動保存という高度な機能を実現する方法-jsチュートリアル-php.cn

HTML、CSS、jQueryを使ってフォームの自動保存という高度な機能を実現する方法

王林

リリース： 2023-10-28 08:20:31

オリジナル

795 人が閲覧しました

HTML、CSS、jQueryを使ってフォームの自動保存という高度な機能を実現する方法

HTML、CSS、jQuery を使用してフォームの自動保存という高度な機能を実装する方法

最新の Web アプリケーションでは、フォームは最も一般的な要素の 1 つです。ユーザーがフォームデータを入力する際に、自動保存機能を実装する方法は、ユーザーエクスペリエンスを向上させるだけでなく、データのセキュリティも確保できます。この記事ではHTML、CSS、jQueryを使ってフォームの自動保存機能を実装する方法と具体的なコード例を紹介します。

1. HTML フォームの構造

まずは簡単な HTML フォーム構造を作成しましょう。以下は例です:

<form id="myForm">
  <input type="text" name="name" placeholder="姓名" />
  <input type="email" name="email" placeholder="邮箱" />
  <textarea name="message" placeholder="留言"></textarea>
</form>

ログイン後にコピー

2. CSS スタイル設定

次に、フォームをより美しくするために、フォームにいくつかのスタイルを設定する必要があります。ここでは単純な例を示します。ニーズに合わせて設計できます。

form {
  width: 400px;
  margin: 0 auto;
}

input, textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

input[type="text"], input[type="email"] {
  height: 40px;
}

textarea {
  height: 100px;
}

.button {
  display: inline-block;
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
}

ログイン後にコピー

3. jQuery を使用してフォームを自動保存する

次に、jQuery を使用してフォームの自動保存機能を実装する必要があります。 localStorage を使用してフォームデータを保存します。ユーザーがフォームに入力すると、データが自動的に localStorage に保存されます。ユーザーがページを更新するかブラウザを閉じて再度ページにアクセスすると、以前に保存したデータがフォームに自動的に入力されます。

// 当用户输入时，保存表单数据到localStorage
$('input, textarea').on('keyup', function() {
  var inputName = $(this).attr('name');
  var inputValue = $(this).val();
  localStorage.setItem(inputName, inputValue);
});

// 当页面加载完成后，自动填充表单数据
$(document).ready(function() {
  $('input, textarea').each(function() {
    var inputName = $(this).attr('name');
    var inputValue = localStorage.getItem(inputName);
    $(this).val(inputValue);
  });
});

ログイン後にコピー

4. 完全なサンプルコード

以下は、HTML、CSS、jQuery を含む完全なサンプルコードです。

<!DOCTYPE html>
<html>
<head>
  <title>表单自动保存</title>
  <style>
    form {
      width: 400px;
      margin: 0 auto;
    }

    input, textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
    }

    input[type="text"], input[type="email"] {
      height: 40px;
    }

    textarea {
      height: 100px;
    }

    .button {
      display: inline-block;
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <form id="myForm">
    <input type="text" name="name" placeholder="姓名" />
    <input type="email" name="email" placeholder="邮箱" />
    <textarea name="message" placeholder="留言"></textarea>
  </form>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    // 当用户输入时，保存表单数据到localStorage
    $('input, textarea').on('keyup', function() {
      var inputName = $(this).attr('name');
      var inputValue = $(this).val();
      localStorage.setItem(inputName, inputValue);
    });

    // 当页面加载完成后，自动填充表单数据
    $(document).ready(function() {
      $('input, textarea').each(function() {
        var inputName = $(this).attr('name');
        var inputValue = localStorage.getItem(inputName);
        $(this).val(inputValue);
      });
    });
  </script>
</body>
</html>

ログイン後にコピー

概要

以上の手順でフォームの自動保存機能を簡単に実装することができます。ユーザーはデータ損失を心配する必要はありません。ブラウザを閉じたり、ページを更新したりしても、データは引き続き保持されます。もちろん、これは単なる単純な例であり、特定のニーズに応じてコードを拡張および最適化できます。この記事がお役に立てば幸いです!

以上がHTML、CSS、jQueryを使ってフォームの自動保存という高度な機能を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。