Viele Websites verwenden Formulare, damit Benutzer ihre Programme und Funktionen durchlaufen können. Daher möchten manche Benutzer ihre persönlichen Daten nach dem Drücken der Schaltfläche „Senden“ gelöscht haben. Andere haben vielleicht ein Problem mit der Autovervollständigungsfunktion, da sie ihre Eingaben durcheinander bringen kann.
Wie auch immer, es gibt schnelle Lösungen, die Sie mit ein paar Zeilen HTML anwenden können. Wichtig ist, dass Sie die Methode anwenden, die Ihnen am angenehmsten erscheint. Sie können auch jede dieser Methoden anwenden, je nachdem, was Ihre Websites benötigen.
Bevor wir zu den eigentlichen Lösungen kommen, möchte ich mich bei TestDinBolig.dk und Led-strips.dk dafür bedanken, dass dieser Leitfaden Wirklichkeit geworden ist.
Die Lösung „Autovervollständigen aus“
Wie bei allem, was mit HTML zu tun hat, ist es hilfreich, sich zuerst die einfachsten Lösungen einfallen zu lassen. In diesem Fall handelt es sich um ein einfaches Formular mit ein paar Zeilen, um die „Autofill“-Funktion der meisten Websites zu entfernen.
Obwohl dies für faule Menschen, die nicht gerne Formulare ausfüllen, sehr praktisch sein kann, kann es für HTML-Programmierer auch eine Qual sein. Diese Funktionalitäten machen das Zurücksetzen von Formularen fast nutzlos, da das Formular die Details für den Benutzer einfach automatisch vervollständigt.
Hier ist ein Beispiel, das die Funktion zum automatischen Vervollständigen ausschaltet.
Benutzername:
E-Mail:
Wenn Sie genau hinsehen, werden Sie feststellen, dass diese Lösung sehr einfach ist. Sie enthält die Option autocomplete=“off“, um die automatische Ausfüllfunktion zu entfernen. Damit werden nicht mehr jedes Mal, wenn ein Benutzer das Formular ausfüllt, automatisch Details vervollständigt. Wenn Sie in Ihrem Projekt die Privatsphäre nicht verletzen wollen, ist dies ein praktisches Tool.
Denken Sie daran, dass die Option autocomplete=“off“ optional ist. Die meisten Menschen möchten, dass ihre Daten automatisch ausgefüllt werden, weil es so bequem ist. Schließlich ist es ermüdend, von Zeit zu Zeit Ihren vollständigen Namen, Ihre E-Mail-Adresse, Ihre Adresse und andere persönliche Daten einzugeben. Wenn Ihnen jedoch der Schutz Ihrer Privatsphäre und die Löschung Ihrer Daten am Herzen liegt, dann ist das Entfernen der automatischen Ausfüllung eine schnelle Lösung.
Ajax zum Zurücksetzen von Formularübermittlungen verwenden
Wenn Sie über die einfachen HTML-Befehlszeilen hinausgehen möchten, können auch verschiedene AJAX-Techniken zum Einsatz kommen. Hier sind die gebräuchlichsten davon:
HTML-Formular über AJAX verwenden
Name:
E-Mail:
In den obigen Zeilen sehen Sie, dass das HTML-Formular AJAX für die Übermittlung verwendet. Ähnlich wie im vorherigen Beispiel müssen Sie sich als Anfänger keine großen Sorgen machen.
Es gibt jedoch einige wichtige Teile des Codes, die Sie sich merken sollten:
In diesem Fall wird das Feld nicht leer sein. Stattdessen wird „John Smith“ angezeigt, und Sie können die Platzhalter auch so konfigurieren, dass andere Namen verwendet werden. Sie können zum Beispiel auch „John Doe“ oder „Jane Smith“ einfügen.
Dies ist hilfreich, wenn Sie ein Beispiel für ein Feld hinterlassen möchten, bevor der Benutzer es ausfüllt.
In diesem Fall wird das E-Mail-Feld nach dem Absenden jedoch auf leer zurückgesetzt. Diese Zeile ist der richtige Weg, wenn Sie alle Spuren von E-Mail-Adressen nach der Fertigstellung entfernen möchten. Ähnlich wie Passwörter müssen auch E-Mail-Adressen geschützt werden.
Javascript-Methoden verwenden
Funktion verarbeiten () {
// (A) FORMULARDATEN ABRUFEN
var form = document.getElementById(„my-form“);
var data = new FormData(form);
// (B) AJAX-FORMULAR SENDEN
// HINWEIS: VERWENDEN SIE HTTP://. NICHT FILE://.
var xhr = new XMLHttpRequest();
xhr.open(„POST“, „0-dummy.html“);
xhr.onload = function () {
console.log(this.response);
form.reset(); // RESET FORM
};
xhr.send(data);
// (C) STANDARDFORMULAR ABSCHICKEN/SEITE NEU LADEN STOPPEN
return false;
}
Javascript kann für Anfänger viel schwieriger zu verstehen sein. In diesem Fall erfolgt die Übermittlung des Formulars auf eine einzigartige Weise. Die Übermittlung des Formulars erfolgt, ohne dass die Seite aktualisiert wird, und nutzt den AJAX-Mechanismus vollständig aus.
Falls Sie sich fragen, wofür AJAX eigentlich steht: Es bedeutet Asynchronous Javascript and XML. Ein ziemlicher Zungenbrecher, aber wenn Sie ihn aufmerksam lesen, wissen Sie genau, was er bedeutet.
Und nun zum Kern der Sache. Um dies vollständig umzusetzen, befolgen Sie die folgenden Schritte.
Als erstes müssen Sie sich das HTML-Formular besorgen:
var form = document.getElementById(„my-form“).
Danach erfassen Sie die Formulardaten:
var data = new FormData(form).
Als nächstes erstellen Sie die AJAX-Anfrage:
var xhr = new XMLHttpRequest().
Achten Sie jetzt genau auf die Zeile „xhr.onload“. Diese Zeile enthält einen wichtigen Teil der Programmierung, die zum Absenden des Formulars erforderlich ist. Wenn sie ausgeführt wird, wird das Formular abgeschickt und der Server teilt Ihnen mit, dass er die Daten erhalten hat.
Dies ist sehr wichtig, wenn Sie ein Formular erstellen, das narrensicher und effizient ist.
Teilweise Formular zurücksetzen
Wenn Sie nur einen Teil des Formulars freigeben möchten, gibt es eine Möglichkeit, dies zu tun. Sie können einige HTML-Zeilen verwenden, die angeben, welche Teile des Formulars gelöscht werden müssen.
Dies lässt sich am besten anhand des folgenden Beispiels zeigen:
E-Mail:
Das Passwort:
Bestätigen Sie das Passwort:
Mit diesem Formular erhalten Sie ein herkömmliches HTML-Formular. Aber dieses Mal werden die Passwortfelder entfernt. Das E-Mail-Feld behält die vom Benutzer eingegebenen Informationen bei. Auf diese Weise wird die Bequemlichkeit beibehalten, ohne die Privatsphäre und die persönlichen Daten zu gefährden.
Javascript für Teilbereiche verwenden
Funktion verarbeiten () {
// (A) FORMULARDATEN ABRUFEN
var data = new FormData(document.getElementById(„mein-formular“));
// (B) AJAX-FORMULAR SENDEN
var xhr = new XMLHttpRequest();
xhr.open(„POST“, „0-dummy.html“);
xhr.onload = function () {
console.log(this.response);
// MANUELL ZURÜCKSETZEN
document.getElementById(„user-password“).value = „“;
document.getElementById(„confirm-password“).value = „“;
};
xhr.send(data);
// (C) STANDARDFORMULAR ABSCHICKEN/SEITE NEU LADEN STOPPEN
return false;
}
In diesen Codezeilen werden Sie sehen, dass es anderen AJAX-Prozessen sehr ähnlich ist. Wenn Sie jedoch nur einen Teil der Formulare zurücksetzen möchten, müssen Sie einige dieser Zeilen ändern. Deshalb müssen die Felder manuell eingerichtet werden, wobei die Werte einzeln zurückgesetzt werden.
Schlussfolgerung zum Löschen von Formulardaten nach dem Absenden
Alles in allem ist das Zurücksetzen der Formulardaten nach dem Absenden ein Prozess, der etwas Bastelei mit HTML erfordert. Welchen Modus Sie auch immer implementieren wollen, stellen Sie sicher, dass Sie ihn testen, um Fehler zu vermeiden. Versuchen Sie, mehrere Testläufe mit mehreren Benutzern durchzuführen, bevor Sie das Projekt in Betrieb nehmen.
Lesen Sie auch Hervorragende Themes Anleitung zum Zentrieren eines Videos in HTML
