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.
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.