So nutzen Sie HTML, CSS und jQuery, um die erweiterte Funktion des automatischen Speicherns von Formularen zu realisieren-js-Tutorial-php.cn

So nutzen Sie HTML, CSS und jQuery, um die erweiterte Funktion des automatischen Speicherns von Formularen zu realisieren

王林

Freigeben： 2023-10-28 08:20:31

Original

878 Leute haben es durchsucht

So nutzen Sie HTML, CSS und jQuery, um die erweiterte Funktion des automatischen Speicherns von Formularen zu realisieren

So implementieren Sie mit HTML, CSS und jQuery die erweiterte Funktion des automatischen Speicherns von Formularen

In modernen Webanwendungen sind Formulare eines der häufigsten Elemente. Wenn Benutzer Formulardaten eingeben, kann die Implementierung der automatischen Speicherfunktion nicht nur die Benutzererfahrung verbessern, sondern auch die Datensicherheit gewährleisten. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und jQuery die automatische Speicherfunktion des Formulars implementieren und spezifische Codebeispiele anhängen.

1. Strukturaufbau eines HTML-Formulars

Erstellen wir zunächst eine einfache HTML-Formularstruktur. Hier ist ein Beispiel:

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

Nach dem Login kopieren

2. CSS-Stileinstellungen

Als nächstes müssen wir einige Stile für das Formular festlegen, um es schöner zu machen. Hier sind nur einfache Beispiele, Sie können es nach Ihren Bedürfnissen gestalten.

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;
}

Nach dem Login kopieren

3. Verwenden Sie jQuery, um das Formular automatisch zu speichern. Jetzt müssen wir die Funktion zum automatischen Speichern des Formulars über jQuery implementieren. Wir werden localStorage verwenden, um Formulardaten zu speichern. Wenn der Benutzer Eingaben in das Formular eingibt, werden die Daten automatisch in localStorage gespeichert. Wenn der Benutzer die Seite aktualisiert oder den Browser schließt und dann die Seite erneut besucht, füllt das Formular automatisch die zuvor gespeicherten Daten aus.

// 当用户输入时，保存表单数据到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);
  });
});

Nach dem Login kopieren

4. Vollständiger Beispielcode

Das Folgende ist der vollständige Beispielcode, einschließlich HTML, CSS und 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>

Nach dem Login kopieren

Zusammenfassung

Durch die oben genannten Schritte können wir die automatische Speicherfunktion des Formulars einfach implementieren. Benutzer müssen sich keine Sorgen über Datenverlust machen, die Daten bleiben auch dann erhalten, wenn sie den Browser schließen oder die Seite aktualisieren. Dies ist natürlich nur ein einfaches Beispiel und Sie können den Code entsprechend Ihren spezifischen Anforderungen erweitern und optimieren. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonSo nutzen Sie HTML, CSS und jQuery, um die erweiterte Funktion des automatischen Speicherns von Formularen zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!