Web-Entwicklung ist ein wichtiger Teil des modernen Internets. Ihre Website bietet möglicherweise effektive Lösungen und fantastische Inhalte, aber ohne Feedback verpassen Sie möglicherweise die Gelegenheit, wertvolles Feedback und Anregungen von Ihren Nutzern zu erhalten.
Alle Benutzer schätzen die Möglichkeit, Website-Besitzer zu kontaktieren, und in der heutigen Welt ist Feedback zu einem festen Bestandteil jedes erfolgreichen Online-Geschäfts geworden. Das Erstellen eines Feedback-Formulars auf Ihrer Website ist eine großartige Möglichkeit, die Interaktion mit Ihrem Publikum zu etablieren und aufrechtzuerhalten.
Und während es auf den ersten Blick scheint, als könnte es schwierig sein, ein Feedback-Formular zu erstellen, ist es tatsächlich ziemlich einfach, besonders wenn Sie mit den Grundlagen von HTML vertraut sind. In diesem Artikel werden wir uns die Schritte zum Erstellen eines Feedback-Formulars in HTML ansehen, das Ihnen hilft, Feedback, Kommentare und Vorschläge von Ihren Benutzern zu erhalten.
Zunächst benötigen wir ein HTML-Formular, mit dem Benutzer ihre Kommentare und Vorschläge hinterlassen können. Legen Sie fest, welche Informationen Sie von Ihren Benutzern erhalten möchten: Name, E-Mail-Adresse, Telefonnummer und Kommentar. Mit HTML-Elementen wie und können Sie leicht Eingabefelder erstellen, in denen Benutzer ihre Informationen eingeben können.
Schritt 1: Erstellen eines Feedback-Formulars
Sie müssen HTML-Elemente verwenden, um ein Feedback-Formular zu erstellen, z. B. form, input, textarea und button.
Element form stellt einen Container für Formularelemente dar. Es muss ein Attribut enthalten action das auf eine URL oder ein Skript verweist, das die Formulardaten verarbeitet. Sie können auch ein Attribut verwenden method um anzugeben, wie die Formulardaten gesendet werden, verwenden Sie ein HTTP-GET oder eine POST-Anfrage.
Verwenden Sie die Elemente, um Eingabefelder und Textbereiche zu erstellen, die Sie ausfüllen möchten input und textarea. Element input ermöglicht es dem Benutzer, einzeiligen Text einzugeben, während das Element textarea stellt einen Bereich für die Eingabe von mehrzeiligem Text bereit.
Die Schaltfläche zum Senden eines Formulars wird mit einem Element erstellt button. Sie können das Attribut verwenden type, um anzugeben, dass es sich bei diesem Element um eine Schaltfläche zum Senden eines Formulars handelt.
Schritt 2: Hinzufügen von Eingabefeldern
Nachdem Sie die grundlegende Formularstruktur erstellt haben, müssen Sie Felder hinzufügen, um Informationen von Benutzern einzugeben.
Dazu werden in HTML verschiedene Arten von Eingabeelementen verwendet, z. B. Textfelder, Bildlaufleisten und Kontrollkästchen.
Beginnen wir mit dem Hinzufügen eines Textfelds. Dies kann mit einem Tag mit dem type-Attribut mit dem Wert "text" erfolgen. Zum Beispiel:
Im obigen Beispiel haben wir ein Feld für den Benutzernamen erstellt. Das id-Attribut gibt eine eindeutige Feld-ID an, die zum Formatieren oder Manipulieren mit JavaScript verwendet werden kann. Das name-Attribut gibt den Namen des Felds an, das für die Verarbeitung der Daten auf dem Server verwendet wird.
Sie können ein Tag verwenden, um eine Bildlaufleiste zu erstellen. Zum Beispiel:
In diesem Beispiel haben wir ein Feld erstellt, um die Nachricht des Benutzers einzugeben. Die rows- und cols-Attribute definieren die Anzahl der sichtbaren Zeilen und Spalten in einem Textfeld entsprechend.
Neben Textfeldern und Bildlaufleisten werden häufig Kontrollkästchen verwendet, um bestimmte Optionen auszuwählen. Die Kontrollkästchen werden mit einem Tag mit dem type-Attribut mit dem Wert "checkbox" erstellt. Zum Beispiel:
In diesem Beispiel haben wir ein Kontrollkästchen zum Abonnieren eines Newsletters erstellt. Wenn das Kontrollkästchen vom Benutzer aktiviert ist, werden die Daten mithilfe des name-Attributs mit dem im Tag angegebenen Wert an den Server gesendet.
Auf diese Weise wird unser Formular nach dem Hinzufügen aller Eingabefelder bereit sein, Informationen von Benutzern zu sammeln. Es wird jedoch empfohlen, vor dem Senden der Daten mithilfe des Attributs required eine Überprüfung auf die Vollständigkeit der erforderlichen Felder hinzuzufügen. Dadurch wird sichergestellt, dass der Benutzer vor dem Senden des Formulars alle erforderlichen Daten eingegeben hat.
Schritt 3: Einrichten der Formularvalidierung
Um sicherzustellen, dass das Feedback-Formular korrekt ausgefüllt wird, müssen Sie die Validierung der Daten konfigurieren. Dadurch können Benutzer die Möglichkeit einschränken, falsche oder falsche Daten einzugeben.
Geben Sie zunächst für jedes Formularfeld bestimmte Regeln an. Untersuchen Sie die Anforderungen für jedes Feld und legen Sie Beschränkungen für die Länge, das Eingabeformat und die Auffüllpflicht fest.
Sie können beispielsweise die folgenden Regeln für das Feld Name festlegen:
- Länge: mindestens 2 Zeichen
- Format: nur Buchstaben
- Unabdingbarkeit: das Feld muss ausgefüllt sein
Geben Sie auf ähnliche Weise Regeln für andere Felder wie "E-Mail", "Betreff der Nachricht" und "Nachricht" an. Sie können beispielsweise die folgenden Regeln für das Feld "E-Mail" hinzufügen:
- Länge: mindestens 5 Zeichen
- Format: gültige E-Mail-Adresse
- Unabdingbarkeit: das Feld muss ausgefüllt sein
Nachdem Sie die Regeln für jedes Feld festgelegt haben, fügen Sie die entsprechenden Attribute zu den Tags des Formulars hinzu. Zum Beispiel:
In diesem Beispiel haben wir das Attribut "required" angegeben, das angibt, dass das Feld ausgefüllt werden muss, und das Attribut "minlength", das die minimale Länge der eingegebenen Zeichen begrenzt. Das Attribut "pattern" definiert das Eingabeformat mithilfe eines regulären Ausdrucks.
Nachdem Sie alle Regeln und Attribute hinzugefügt haben, überprüft Ihr Feedback-Formular die von den Benutzern eingegebenen Daten auf Übereinstimmung mit den angegebenen Formaten und dem erforderlichen Ausfüllen. Dies wird die Qualität und Genauigkeit der erhaltenen Informationen erheblich verbessern.
Schritt 4: Hinzufügen einer Schaltfläche zum Senden
Nachdem der Benutzer seine Nachricht in das Feedback-Formular eingegeben hat, müssen Sie die Möglichkeit erhalten, die Informationen zu senden.
Dazu fügen wir eine Übermittlungsschaltfläche hinzu, mit der der Benutzer seine Nachricht senden kann.
Fügen Sie dem HTML-Code den folgenden Code hinzu:
Dieser Code erstellt eine Übermittlungsschaltfläche mit der Bezeichnung "Senden". Wenn Sie auf diese Schaltfläche klicken, werden die Daten aus dem Formular an den Server gesendet.
Um die Schaltfläche attraktiver zu machen, können Sie Stile mit CSS hinzufügen. Zum Beispiel:
padding: 10px 20px;
Jetzt haben Sie ein voll funktionsfähiges Feedback-Formular mit der Übermittlungsschaltfläche. Wenn Sie auf die Schaltfläche klicken, werden die Daten an die im Formular angegebene E-Mail-Adresse gesendet.
Anmerkung: Denken Sie daran, dem Server Aktionen hinzuzufügen, um diese Daten zu verarbeiten und eine Antwort an den Benutzer zu senden.
Schritt 5: Erstellen eines Formularbehandlers
Nachdem Sie Ihr Formular in HTML erstellt haben, müssen Sie einen Formularbehandler erstellen, der die vom Benutzer gesendeten Daten verarbeitet.
Zuerst müssen Sie Ihrer HTML-Datei den folgenden Code hinzufügen:
Hier haben wir eine "submitForm" -Funktion erstellt, die beim Senden des Formulars aufgerufen wird. Innerhalb dieser Funktion erhalten wir die Werte der Formularfelder mithilfe der Methode "getElementById" und speichern sie in Variablen.
Als nächstes können Sie den Formularbehandlungscode hinzufügen, der Ihren Anforderungen entspricht. Beispielsweise können Sie Formulardaten mit einer AJAX-Anfrage an den Server senden oder in einer Datenbank speichern.
Am Ende der Formularbehandlungsfunktion muss "false" zurückgegeben werden, um zu verhindern, dass das Standardformular gesendet wird. Dies ist wichtig, wenn Sie Formulardaten mit JavaScript verarbeiten möchten, ohne die Seite neu zu laden.
Jetzt ist Ihr Formular bereit, Daten zur Verarbeitung zu senden! Im nächsten Schritt werden wir uns ansehen, wie Sie diesen Handler mit Ihrem HTML-Formular verknüpfen.
Schritt 6: Einrichten einer erfolgreichen Sendebenachrichtigung
Nachdem der Benutzer das Formular eingereicht hat, ist es wichtig, dass er über eine erfolgreiche Übermittlung benachrichtigt wird. Dazu wird JavaScript verwendet, mit dem Sie den Inhalt einer Seite dynamisch ändern können, ohne sie neu zu laden.
Fügen Sie den folgenden Code nach der Funktion hinzu, die die Daten sendet, um die Benachrichtigung für eine erfolgreiche Übermittlung zu konfigurieren:
In diesem Code erstellen wir eine Funktion "Sendebenachrichtigung", die eine Benachrichtigung über eine erfolgreiche Übermittlung anzeigt. Der Code innerhalb der Funktion kann je nachdem, wie die Benachrichtigung aussehen soll, unterschiedlich sein. Sie können beispielsweise Pop-ups verwenden oder den Inhalt eines Elements auf einer Seite ändern.
Sobald die Funktion definiert ist, fügen wir der Übermittlungsschaltfläche des Formulars einen "Click" -Ereignishandler hinzu. Innerhalb des Handlers rufen wir die Funktion zum Senden von Daten und die Funktion zur Benachrichtigung bei erfolgreichem Senden auf. Wenn Sie also auf die Schaltfläche zum Senden des Formulars klicken, werden die Daten gesendet und dann wird eine Benachrichtigung über die erfolgreiche Übermittlung angezeigt.
Nachdem Sie diesen Code zu Ihrem HTML-Formular hinzugefügt haben, erhalten Benutzer eine Benachrichtigung über eine erfolgreiche Übermittlung, um sicherzustellen, dass ihre Anfrage erfolgreich bearbeitet wurde.
Schritt 7: Hinzufügen von Stilen zum Feedback-Formular
Damit das Feedback-Formular modern und attraktiv aussieht, müssen Stile hinzugefügt werden. In diesem Schritt passen wir das Erscheinungsbild des Formulars und der Eingabeelemente an.
| Name: |
| E-Mail: |
| Nachricht: |
Jetzt fügen wir Stile zu unserer Form hinzu. Wir können dafür CSS verwenden. Erstellen wir einen separaten Stilblock innerhalb des Tags und beschreiben die Stile, die wir benötigen.
border: 1px solid #ccc;
