Kommentarfeld in HTML und JavaScript erstellen

Muhammad Muzammil Hussain 15 Februar 2024

JavaScript JavaScript Element

In diesem Tutorial geht es darum, ein Kommentarfeld mithilfe eines Formulars zu erstellen, Daten aus Benutzereingaben in HTML abzurufen und sie mithilfe von JavaScript-Ereignissen und -Funktionen anzuzeigen.

Kommentarfeld in HTML und JavaScript erstellen

Um Kommentare und andere Benutzerdaten aus Eingabefeldern zu erhalten, können wir Eingabeformulare als Kommentarfeld mit Standard-HTML-Elementen <form></form> und <textarea></textarea> erstellen. Wir können IDs für dieses Element definieren und die Daten der Werteeigenschaft dieses Elements mithilfe von IDs abrufen.

Um Benutzereingabewerte zu sammeln, haben wir ein HTML-Formularelement verwendet. Mit dem type-Attribut können wir Input-Elemente unterschiedlich darstellen.

Syntax:

<form>
  <input type="text" id="inputId" name="username">
</form>

Wenn langer Text oder mehrzeilige Texte eingefügt werden müssen, ist das Element <textarea> perfekt, um Kommentare und Bewertungen vom Benutzer zu erhalten. Wir können die Größe des Textbereichs angeben, indem wir die maximalen Zeilen und Spalten darin mit <rows> und <cols> oder mit CSS angeben.

Ein Textbereich mit fester Breite kann für unbegrenzte Zeichen verwendet werden. Wir können auch id definieren, um den Wert zu erhalten.

Syntax:

<textarea id="elementId" name="inputName" rows="3" cols="40">
Default placeholder or any dummy text.
</textarea>

Lassen Sie uns nun eine einfache Webseite erstellen, auf der wir beide Eingabefeldelemente verwenden, um Daten wie den vollständigen Namen, die E-Mail-Adresse und den Kommentar des Benutzers abzurufen und sie beim Klicken auf die Schaltfläche anzuzeigen.

Codebeispiel:

<!DOCTYPE html>
<html>
   <body>
      <h2>DelftStack learning</h2>
      <h3>JavaScript comment box example</h3>
      <form id="myForm">
         Full name: <input id="userName" type="text" name="fname">
         <br><br>
         Email : <input id="userEmail" type="text" name="email">
         <br><br>
         <textarea id ="userComment" rows="4" cols="50" name="comment"> Enter comment here...</textarea>
         <br><br>
         <input type="button" onclick="myFunction()" value="Submit">
      </form>
      <h5>Submitted data :</h5>
      <p id="data"></p>
      <script>
         function myFunction(){
          let data = "";  let name = document.getElementById("userName").value
          let email = document.getElementById("userEmail").value
          let comment = document.getElementById("userComment").value
         
         data = "User name : "+name+"<br/>User email : "+email+ "<br/>User comment : "+comment
         
         document.getElementById("data").innerHTML = data  // display data to paragraph
         }
      </script>
   </body>
</html>

Ausgang:

Kommentarfeld in HTML und Javascript erstellen

In der obigen HTML-Quelle haben wir das Absatzformular-Tag <form></form> verwendet, um Benutzereingabefelder zu erstellen. In diesem Tag haben wir mehrere Texteingabeelemente definiert, um den Benutzernamen und die E-Mail-Adresse zu erhalten, und wir müssen IDs für dieses Element definieren.

In myFunction() erhalten wir alle Benutzereingabewerte mit document.getElementById("id") und speichern sie in Variablen. Wir haben Verkettungen (+) verwendet, um eine einzelne Zeichenfolge zu erstellen, und diese Zeichenfolge in einem Absatz angezeigt, der sich unter der Überschrift der übermittelten Daten befindet.

Kommentarfeld in HTML und JavaScript erstellen

Verwandter Artikel - JavaScript Element