HOWTO · JavaScript
Kommentarfeld in HTML und JavaScript erstellen
In diesem Artikel erfahren Sie, wie Sie ein Kommentarfeld mithilfe eines Formulars erstellen und Daten aus einem Benutzereingabeformular abrufen und mithilfe von JavaScript-Ereignissen und -Funktionen mit einem Beispiel anzeigen.
Auf dieser Seite
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:
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.