So erstellen Sie ein einfaches Kommentarfeld auf einer Webseite mit HTML, CSS und JavaScript

Um Feedback oder eine Nachricht von einem Website -Besucher zu erhalten, benötigen Sie ein Kommentarfeld auf Ihrer Webseite. Ein Kommentarfeld kann mit jeder Web -Technologie erstellt werden, unabhängig davon, ob es sich um einfache HTML, CSS oder sogar JavaScript handelt. Die drei Tools HTML, CSS und JavaScript reichen aus, um voll funktionsfähige Websites zu erstellen.

Wir werden untersuchen, wie Sie in diesem Beitrag ein einfaches Kommentarfeld mit HTML, CSS und JavaScript erstellen können.

Html

Öffnen Sie Ihren bevorzugten Redakteur und geben Sie den untergegebenen Code ein oder kopieren Sie sie ein oder kopieren Sie den folgenden Code. Speichern Sie die Datei mit HTML -Erweiterung.

Post

Im obigen HTML -Code haben wir die verwendet Verknüpfung Tag im Kopf -Tag, um die CSS -Datei zu verweisen, die wir später verwenden werden. Danach in der Körper Tag zuerst haben wir ein Eingabefeld initiiert, in dem ein Benutzer seinen Kommentar eingeben kann. Dann eine Schaltfläche mit dem Namen des Namens des Post wird initiiert, auf die geklickt wird, um einen Kommentar einzugeben. Danach haben wir eine ungeordnete Liste (UL) initiiert und sie leer gelassen, weil wir in diesem Tag ein Li -Element aus JavaScript hinzufügen werden. Sie können auch sehen, dass wir die verwenden Ausweis Attribut im obigen Code, mit dem die entsprechenden Elemente im JavaScript -Code verweist. Das letzte Tag ist das Skript Tag, wo wir die Referenz der JavaScript -Datei übergeben haben, die an die aktuelle HTML -Datei angehängt wird. Der JavaScript -Dateiname lautet Code.JS.

CSS

Erstellen Sie eine Datei mit dem Namen des Stils.CSS. Es ist zu beachten, dass Sie Ihre Datei alles andere als beachten können, um diesen Namen im HTML -Datei -Link -Tag zu verweisen. Kopieren Sie den folgenden Code in Ihre CSS -Datei:

Körper
Hintergrund: Dodgerblue Linear-Gradient (45de, Aqua, Dodgerblue, Deeppink) fest;

#comment-box, #Post
Grenze: Keine;
Border-Radius: 5px;

#Post: Hover
Hintergrundfarbe: Deeppink;

Im obigen CSS -Code verwiesen wir zunächst auf die Körper Tag von HTML und dekorierte den Körperhintergrund mit verschiedenen Farben. Dann mit dem Ausweis Das Attribut des Eingabefeldes verschwanden den Rand des Eingangsfeld. Das gleiche Styling wurde auf die angewendet Post Taste. Danach die Verwendung der schweben Eigenschaft Wir setzen eine Hintergrundfarbe von Tiefrosa für die Post-Taste ein, was bedeutet, dass wenn ein Benutzer über die schwebt Post Button seine Farbe ändert sich zu Deep Pink.

JavaScript

Erstellen Sie eine JavaScript -Datei mit JS Erweiterung zum Beispiel Code.JS. Es ist zu beachten, dass der Name der Datei dem ähnlich sein sollte, auf das im Skript -Tag der HTML -Datei verwiesen wurde.

Im Code.JS Datei erhalten wir zunächst das HTML -Schaltflächenelement mithilfe der Taste GetElementById () Methode und übergeben Sie den Namen der ID an die Schaltfläche in HTML. Sie können auch einen Event -Hörer sehen, der dem angeschlossen ist Post Welches ist im Grunde das Knopfelement. Dieser Ereignishörer hört kontinuierlich an und klickt immer dann, wenn ein Benutzer auf die klickt Post Schaltfläche Die Funktion innerhalb der Event -Hörer wird durchgeführt.

var post = document.GetElementById ("Post");
Post.AddEventListener ("Click", function ()
var commentboxValue = Dokument.GetElementById ("Kommentar").Wert;
var li = document.CreateLement ("li");
var text = dokument.CreateTeXTNode (commentBoxValue);
li.appendChild (Text);
dokumentieren.GetElementById ("ungeordnet").appendChild (li);
);

In der Event -Hörerfunktion erhalten wir zunächst den Wert des Eingabefelds und danach haben wir ein Li -Element erstellt. Um den Text des von uns verwendeten Li -Elements festzulegen CreateTextNode und danach benutzen Sie die appendChild Methode Wir haben den Text dem Li -Element zur Verfügung gestellt. Endlich die Verwendung der appendChild Methode Wir stellen die ungeordnete Liste des LI -Elements an, das wir gerade erstellt haben.

Abschluss

HTML, CSS und JavaScript sind die Bausteine ​​für einen Webentwickler, und viele Websites werden mit diesen drei Technologien entwickelt.

In diesem Beitrag haben wir Ihnen den Code und die Erläuterung des Codes zum Erstellen eines Kommentarfelds mit HTML, CSS und JavaScript zur Verfügung gestellt. Dieses Projekt wird nützlich sein, wenn Sie Aufgabenlisten, Kommentare auf einer Webseite oder Feedback-Formularen erstellen und Text an einer Seite in jedem Webprojekt anhängen.