Crear cuadro de comentarios en HTML y JavaScript

Muhammad Muzammil Hussain 15 febrero 2024

JavaScript JavaScript Element

Este tutorial trata sobre la creación de un cuadro de comentarios usando un formulario, obteniendo datos de la entrada del usuario en HTML y mostrándolos usando eventos y funciones de JavaScript.

Crear cuadro de comentarios en HTML y JavaScript

Para obtener comentarios y otros datos de usuario de los campos de entrada, podemos crear formularios de entrada como un cuadro de comentarios utilizando los elementos html predeterminados <form></form> y <textarea></textarea>. Podemos definir ids para ese elemento y obtener los datos de la propiedad de valor de ese elemento usando ids.

Para recopilar los valores de entrada del usuario, utilizamos un elemento de formulario HTML. Usando el atributo de tipo, podemos mostrar los elementos de entrada de manera diferente.

Sintaxis:

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

Si es necesario insertar texto largo o textos de varias líneas, el elemento <textarea> es perfecto para obtener comentarios y reseñas del usuario. Podemos especificar el tamaño del área de texto proporcionando el máximo de filas y columnas usando <rows> y <cols> o usando CSS.

Se puede usar un área de texto de ancho fijo para caracteres ilimitados. También podemos definirle id para obtener el valor.

Sintaxis:

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

Ahora, creemos una página web simple en la que usaremos ambos elementos de campo de entrada para obtener datos como el nombre completo, el correo electrónico y el comentario del usuario y mostrarlos al hacer clic en el botón.

Ejemplo de código:

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

Producción:

crear cuadro de comentarios en html y javascript

En la fuente html anterior, hemos utilizado la etiqueta de formulario de párrafo <formulario></formulario> para crear campos de entrada de usuario. En esa etiqueta, hemos definido el tipo de texto de varios elementos de entrada para obtener el nombre de usuario y el correo electrónico, y tenemos que definir ID para ese elemento.

En myFunction() estamos obteniendo todos los valores de entrada del usuario usando document.getElementById("id") y almacenándolos en variables. Usamos concatenaciones (+) para crear una sola cadena y mostramos esa cadena en un párrafo que se encuentra debajo del encabezado de datos enviados.

Crear cuadro de comentarios en HTML y JavaScript

Artículo relacionado - JavaScript Element